मेरे पास कुछ रेडियो बटन हैं और मैं अलग-अलग छिपे हुए divs दिखाना चाहता हूं जिसके आधार पर रेडियो बटन चुना गया है। यहाँ HTML कैसा दिखता है:

<form name="form1" id="my_form" method="post" action="">
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div>  
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div>  
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div>  
    <input type="submit" value="Submit">
</form>

....

<style type="text/css">
    .desc { display: none; }
</style>

....

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc">consectetur adipisicing</div>
<div id="opt3" class="desc">sed do eiusmod tempor</div>

और यहाँ मेरा jQuery है:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("#"+test).show();
    }); 
});

इसका कारण यह है कि मैं इसे इस तरह से कर रहा हूं क्योंकि मेरे रेडियो बटन और div गतिशील रूप से उत्पन्न हो रहे हैं (रेडियो बटन का मान हमेशा एक समान div होगा)। उपरोक्त कोड आंशिक रूप से काम करता है - जब सही बटन चेक किया जाता है तो divs दिखाएगा, लेकिन बटन अनियंत्रित होने के बाद divs को फिर से छिपाने के लिए मुझे कुछ कोड जोड़ने की आवश्यकता है। धन्यवाद!

39
M Thomas 6 मई 2010, 02:09
जैसा कि @ ste-yeu ने उल्लेख किया है, कृपया चयनकर्ता को अपने jQuery में 'group1' में सही करें :)
 – 
jarodsmk
26 जून 2016, 10:55

9 जवाब

सबसे बढ़िया उत्तर

अपडेट 2015/06

चूंकि प्रश्न पोस्ट किए जाने के बाद से jQuery विकसित हो गया है, अनुशंसित दृष्टिकोण अब $.on का उपयोग कर रहा है

$(document).ready(function() {
    $("input[name=group2]").on( "change", function() {

         var test = $(this).val();
         $(".desc").hide();
         $("#"+test).show();
    } );
});

या बाहर $.ready()

$(document).on( "change", "input[name=group2]", function() { ... } );

मूल उत्तर

आपको .change() ईवेंट हैंडलर का उपयोग करना चाहिए:

$(document).ready(function(){ 
    $("input[name=group2]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
    }); 
});

कार्य करना चाहिए

47
Z. Zlatev 19 जून 2015, 22:22
मैंने इसे इनपुट <?php if($ic==1) {echo "checked"; $ic++;} ?> में जोड़ा ताकि एक डिफ़ॉल्ट रेडियो बटन की जांच की जा सके यह काम करता है लेकिन jquery div को ट्रिगर नहीं करता है
 – 
sanoj lawrence
15 नवम्बर 2019, 23:22

उन्हें दिखाने से पहले बस उन्हें छुपाएं:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});
39
albertein 6 मई 2010, 02:14
$(document).ready(function(){ 
    $("input[name=group1]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
    }); 
});

इस उदाहरण में यह input[name=group1] सही है। हालांकि, कोड के लिए धन्यवाद!

7
Ste Yeu 14 पद 2012, 19:31
<script type="text/javascript">
$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
    });
 });
</script>
</head>
<body>
<label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label>

<div id="blk-1" class="toHide" style="display:none">

    <form action="success1.html">

        Name1:<input type="text" name="name">
             <input type="submit" name="submit">

    </form>

</div>
<div id="blk-2" class="toHide" style="display:none">

    <form action="success1.html">

        Name2:<input type="text" name="name">
             <input type="submit" name="submit">

    </form>
</div>
5
Rajesh Hatwar 10 जुलाई 2013, 15:21

इस घोषणात्मक को बनाने के लिए एक दिलचस्प समाधान है: आप बस प्रत्येक div को एक विशेषता automaticallyVisibleIfIdChecked को चेकबॉक्स या रेडियो बटन की आईडी के साथ दिखाया जाना चाहिए जिस पर यह निर्भर करता है। यानी आपका फॉर्म इस तरह दिखता है:

<form name="form1" id="my_form" method="post" action="">
    <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div>  
    <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div>  
</form>
....
<div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div>
<div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div>

और कुछ पृष्ठ स्वतंत्र जावास्क्रिप्ट है जो कार्यात्मक प्रोग्रामिंग का अच्छी तरह से उपयोग करता है:

function executeAutomaticVisibility(name) {
    $("[name="+name+"]:checked").each(function() {
        $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show();
    });
    $("[name="+name+"]:not(:checked)").each(function() {
        $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide();
    });
}

$(document).ready( function() {
    triggers = $("[automaticallyVisibleIfIdChecked]")
        .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() })
    $.unique(triggers);
    triggers.each( function() {
        executeAutomaticVisibility(this.name);
        $(this).change( function(){ executeAutomaticVisibility(this.name); } );
    });
});

इसी तरह आप automaticallyEnabledIfChecked विशेषता के साथ फॉर्म फ़ील्ड को स्वचालित रूप से सक्षम/अक्षम कर सकते हैं।

मुझे लगता है कि यह विधि अच्छी है क्योंकि यह आपके पृष्ठ के लिए विशिष्ट जावास्क्रिप्ट बनाने से बचाती है - आप केवल कुछ विशेषताओं को सम्मिलित करते हैं जो कहते हैं कि क्या किया जाना चाहिए।

5
Hans-Peter Störr 8 अगस्त 2014, 10:20

इसके लिए सरल jQuery स्रोत -

$("input:radio[name='group1']").click(function() {      
    $('.desc').hide();
    $('#' + $("input:radio[name='group1']:checked").val()).show();
});

इसे थोड़ा और उपयुक्त बनाने के लिए पहले विकल्प में चेक जोड़ें -

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>  

स्टाइल से .desc क्लास हटाएं और divs को संशोधित करें जैसे -

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div>
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

यह वास्तव में किसी भी तरह से अच्छा लगेगा।

4
Bharat 6 जुलाई 2012, 10:37

आप jQuery की show() और hide() विधियों का उपयोग कर सकते हैं। नीचे की तरह:

JQuery:

  $(document).ready(function(){
    $('input[type="radio"]').click(function(){
      var val = $(this).attr("value");
      var target = $("." + val);
      $(".msg").not(target).hide();
      $(target).show();
    });
  });

एचटीएमएल:

<input type="radio" name="color" value="yellow"> Yellow
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green

<div class="yellow msg">You have selected Yellow</div>
<div class="red msg">You have selected Red</div>
<div class="green msg">You have selected Green</div>

यहां एक उदाहरण दिया गया है: DIV दिखाएं/छिपाएं रेडियो बटन क्लिक पर आधारित

3
thomas 14 जिंदा 2021, 16:43

नीचे दिया गया कोड मेरे लिए पूरी तरह से काम करता है:

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});
.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    label{ margin-right: 15px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <label><input type="radio" name="colorRadio" value="red"> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>
        <label><input type="radio" name="colorRadio" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
    <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
1
Pradeep 29 जिंदा 2019, 13:30

मैंने आपको यह समझने के लिए एक सरल कोड लिखा है कि कैसे एक शो बनाने के लिए और jQuery में रेडियो बटन छुपाएं यह बहुत आसान है

<div id="myRadioGroup">

    Value Based<input type="radio" name="cars" checked="checked" value="2"  />

    Percent Based<input type="radio" name="cars" value="3" />
    <br>
    <div id="Cars2" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Value</label>
       <input type="text" id="txtPassportNumber" class="form-control" />
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Percent</label>
       <input type="text" id="txtPassportNumber" class="form-control" />
    </div>
</div>
</div>

Jquery कोड

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});

मुझे टिप्पणी दें

0
Siraj Ahmed 7 जिंदा 2020, 10:52