Comment faire pour afficher/masquer la DIV en cliquant sur le bouton radio?

Par défaut, les deux DIV doit être caché. En sélectionnant le bouton radio", de montrer l'appropriées DIV (à la suite de son #ID).

Ci-dessous mon code:

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

<style> .none { display:none; } </style>

Mais nous devons nous montrer un seul div à la fois. Est-il possible?

appel masquer fonction() de jquery pour l'événement onchange
Ne pas utiliser les 2 en même id sur une seule page.
comme @KamilT dit, le HTML n'est pas valide ici

OriginalL'auteur Umarfaruk M | 2013-07-03

jquery radio-button

Vous pouvez utiliser le data-* attribut ici comme:

HTML

<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />

$(':radio').change(function (event) {
    var id = $(this).data('id');
    $('#' + id).addClass('none').siblings().removeClass('none');
});

TRAVAIL VIOLON DÉMO

Elle fonctionne. Merci 🙂

OriginalL'auteur palaѕн

Cela peut être fait en utilisant le CSS.

Remarque: Le <div>s doivent être générales et les frères et sœurs de la <input> élément.

HTML:

<form>
    <input type="radio" name="showGreen"> Green
    <input type="radio" name="showRed"> Red
    <div id="green">I am the green div.</div>
    <div id="red">I am the red div.</div>
</form>

CSS:

#green, #red {
    display: none;
    padding: 10px;
}

#green {
    background-color: #6f6;
}

#red {
    background-color: #f44;
}

input[name="showGreen"]:checked ~ #green,
input[name="showRed"]:checked ~ #red {
    display: block;
}

JSFiddle: http://jsfiddle.net/Ly56w/

OriginalL'auteur Mahmoud Saeed

Essayez ceci:

HTML:

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bank_div" class="none choice">Bank</div>
<div id="school_div" class="none choice">School</div>

JS:

$("input[type=radio]").click(function(event) {
    var myId = this.id;
    var targetId = myId + "_div";
    $("div.choice:not(#" + targetId + ")").addClass(".none");
    $("#" + targetId).removeClass(".none");
});

Cela ne veut pas montrer le correspondant de la div sur un clic, mais il la cache
Bien noté. J'ai mis à jour le code

OriginalL'auteur

C'est ma solution à l'aide de jQuery:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
function showBank()
{
$("#bankDIV").removeClass("none");
$("#bankDIV").addClass("showDIV");

//Make sure schoolDIV is not visible
$("#schoolDIV").removeClass("showDIV");
$("#schoolDIV").addClass("none");
}

function showSchool()
{
$("#schoolDIV").removeClass("none");
$("#schoolDIV").addClass("showDIV");

//Make sure bankDIV is not visible
$("#bankDIV").removeClass("showDIV");
$("#bankDIV").addClass("none");
}
</script>


</head>
<body>

<input type="radio" name='thing' value='valuable' id="bank" onclick="showBank()"/>
<input type="radio" name='thing' value='valuable' id="school" onclick="showSchool()"/>

<div id="bankDIV" class="none">Bank</div>
<div id="schoolDIV" class="none">School</div>

<style> 
.none { display:none; }, 
.showDIV { display:block; } 
</style>

</body>
</html>

Assurez-vous qu'aucun doublé Id sont présentés dans votre code. Et que seul un DIV est visible à un moment donné.

Ce qui concerne,
Alex

OriginalL'auteur Alex Marinov

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bankDiv" class="none">Bank</div>
<div id="schoolDiv" class="none">School</div>

<style> .none { display:none; } </style>

jQuery:

$(function() {
    $('input[type="radio"]').change(function() {
        var rad = $(this);
        ('input[type="radio"]').addClass('none');
        if (rad.is(':checked'))
            ('#' + rad.attr('id') + 'Div').removeClass('none');
    });
});

OriginalL'auteur Amani

C'est de travailler pour moi:

<div class="form-group">
<label>Please select Your Payment Option:</label><br>
<input id='watch-me1' name='payment' type='radio' class='show-me1' value="Cash On Delivery" checked /> Cash On Delivery<br />
<div id='show-me1' style='display:none;border:1px solid black;color:red;'>Not Available At This Moment!</div>
<input id='watch-me2' name='payment' type='radio' class='show-me2' value="Bkash/Rocket Mobile" /> Bank<br />
<div id='show-me2' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>
<input id='watch-me3' name='payment' type='radio' class='show-me3' value="Credit/Debit Card" /> Credit/Debit Card<br />
<div id='show-me3' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>
<input id='watch-me4' name='payment' type='radio' class='show-me4' value="Paypal" /> Paypal<br />
<div id='show-me4' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>
<script>
$(function(){
$(':radio').click(function() {
$('#' + $(this).attr('class')).fadeIn().siblings('div').hide();
})
.filter(':checked').click();
});
</script>
</div>

Quelques explications supplémentaires à propos de ce code seule réponse serait probablement bénéfique.

OriginalL'auteur Syed Mohammad Ibrahim Khalil

Tout d'abord que ce n'est pas une meilleure approche que vous utilisez le même identifiant pour 2 ou plus de contrôles...

Veuillez faire une id unique pour chaque élément.

utiliser ce code...

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>
<div id="radio_divs">
<div id="bank_div" class="none">Bank</div>
<div id="school_div" class="none">School</div>
</div>
<style> .none { display:none; } 
.view { display:block; }
</style>

maintenant utiliser onclick sur le bouton radio...

jQuery("input[type=radio]").click(function(event) {
jQuery('#radio_divs').children('div').each(function () {
jQuery(this).addClass(".none");
});
jQuery("#" + this.id + "_div").addClass(".view");
});

Il va certainement œuvres et de le rendre visible une seule div et reste divs la rendre invisible....

OriginalL'auteur Gaurav Agrawal

vous pouvez l'essayer aussi bien,

<input type="radio" name='thing' value='valuable' id="bank"/> <input type="radio" name='thing' value='valuable' id="school"/>
<div id="bankDiv" class="none">Bank</div> <div id="schoolDiv" class="none">School</div>

css

.none { display:none; }

jquery

$(function() {
$('input[type="radio"]').change(function() {
var rad = $(this).attr('id');           
$('#' + rad + 'Div').show();
$('#' + rad + 'Div').siblings('div').hide();
});
});

découvrez ce violon : http://jsfiddle.net/Kritika/f2UKj/

OriginalL'auteur Pbk1303

Vous devez vous connecter pour publier un commentaire.