需要帮助来优化单选按钮的代码

Question

$('input[type="radio"]').change(function(){
    if ($('#subscribe').is(':checked')){
         $("#subNow").show();
         $('#oneTime').hide();
    }
    if ($('#one-time').is(':checked')){
       $('#oneTime').show();
       $("#subNow").hide();
    }   
});

The above code is to show and hide 2 div's on click of 2 radio buttons. I am new to jquery so would like to know is there a better way to write this same functionality.

Answer 1

If you setup the initial state, say #subNow { display: none; } #subNow { display: none; } , then just use the .toggle() method, no conditions check what-so-ever...

 $('input[type="radio"]').change(function(){ $("#subNow").toggle(); $('#oneTime').toggle(); }); 

 #subNow { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type='radio' name='rd' checked />1 <input type='radio' name='rd' />2 <br /> <div id="subNow">subNow</div> <div id="oneTime">oneTime</div> 

Also,

if perhaps they are followed on the markup, why not drop JS and go CSS-only??

 input[type="radio"]:nth-child(2):checked ~ #oneTime, #subNow { display: none; } input[type="radio"]:nth-child(2):checked ~ #subNow{ display: block; } 

 <input type='radio' name='rd' checked />1 <input type='radio' name='rd' />2 <br /> <div id="subNow">subNow</div> <div id="oneTime">oneTime</div> 

Answer 2

This is exactly the way I would do this. The only other option would be to get the value of the radio buttons, but you'd essentially be doing the same thing that you already are.

Answer 3

One way is to use common classes and data attributes

  $(".rads").on("change", '[type="radio"]', function (e) { var show = $(this).data("show"); $(".details").hide().filter(show).show(); }); 

 .details { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="rads"> <input type="radio" id="x" name="rad" data-show=".foo" /> <label for="x">A</label> <input type="radio" id="y" name="rad" data-show=".bar" /> <label for="y">B</label> </div> <div class="foo details">Apple</div> <div class="bar details">Bacon</div> 

There is also pure CSS solutions using the :checked selector.

Answer 4

If you don't have any other states to worry about, you can cut the second if and place a else

$('input[type="radio"]').change(function(){
    if ($('#subscribe').is(':checked')){
         $("#subNow").show();
         $('#oneTime').hide();
    }
    else{
       $('#oneTime').show();
       $("#subNow").hide();
    }   
});

You can also use switch