jQuery检查单选框状态并显示一个元素

Question

I'm trying to show a div of another set of radio boxes but only depending on which radio button is first selected. 我试图显示另一组单选框的div，但仅取决于首先选择哪个单选按钮。
If option option one is selected, I would like condition one div to show and if option two is selected I would like condition two div to show. 如果选择了选项选项一，则希望显示条件一div，如果选择了选项二，则希望显示条件二div。

 $(document).ready(function() { $('#condition-one').hide(); $('#condition-two').hide(); if ($("id=[option-one]").is(":checked")) { $('#visible-condition-one').show("slow"); } else if ($("id=[option-two]").is(":checked")) { $('#visible-condition-two').show("slow"); }; });

 <div id="always-visible"> <label class="control-label">Would you like option 1 or option 2</label><br> <label class="radio-label"><input type="radio" id="option-one" name="option-info"> Option 1</label> <label class="radio-label"><input type="radio" id="option-two" name="option-info"> Option 2</label> </div> <div id="condition-one"> <label class="control-label">If you pick option 1, you see this div</label><br> <label class="radio-label"><input type="radio" id="option-three" name="option-info-group-two"> Option 3</label> <label class="radio-label"><input type="radio" id="option-four" name="option-info-group-two"> Option 4</label> </div> <div id="condition-two"> <label class="control-label">If you pick option 2, you see this div</label><br> <label class="radio-label"><input type="radio" id="option-five" name="option-info-group-three"> Option 5</label> <label class="radio-label"><input type="radio" id="option-six" name="option-info-group-three"> Option 6</label> </div>

Answer 1

$(document).ready(function() {

  $('#condition-one').hide();
  $('#condition-two').hide();

  $("#option-one").on("change", function() {
    if($(this).is(":checked")) {
        $('#condition-one').show("slow");
    }
  });

  $("#option-two").on("change", function() {
    if($(this).is(":checked")) {
        $('#condition-two').show("slow");
    }
  });
});

In your code, the action must be taken on user input, in this case, a radio box. 在您的代码中，必须在用户输入（在这种情况下为单选框）上执行操作。 You must attach a 'change' event to your radio boxes and when user changes status, the callback function is triggered. 您必须在单选框上附加一个“更改”事件，并且当用户更改状态时，将触发回调函数。

Answer 2

How about the following: 怎么样：

//Cache our deciding radio buttons
var $radio = $('#always-visible :radio'),

    //An array of the available radio/div identifiers
    ids = ['one', 'two'];

//Bind an event to your deciding radio buttons
$radio.change(function(){

    //That will loop through your radio buttons
    $.each(ids, function(_, n){

        //See if this one is checked
        var checked = $('#option-' + n).prop('checked');

        //If so, show the relevant block, otherwise hide it
        $('#condition-' + n).toggle(checked);
    });

//Trigger the event on page load
}).change();

JSFiddle JSFiddle

Answer 3

i just did something similar(working) 我只是做了类似的事情（工作）

  <html>
  <head>

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script>
   $(document).ready(function() {

   $('#condition-one').hide();
   $('#condition-two').hide();

   $(".radio-label").on("change", function() {
   if ($('.radio-label#1').is(':checked')) {  // if the radiolabel of id=1 is checked
    $('#condition-one').show("slow");         //show condition one
    $('#condition-two').hide();                   


    } else if ($(".radio-label#2").is(":checked")) {
    $('#condition-two').show("slow");
    $('#condition-one').hide("slow");
    }
    });
    });
    </script>
    </head>

      <body>

      <input type="radio" class="radio-label" id="1" name="option-info"></input>
      <input type="radio"  class="radio-label" id="2" name="option-info"></input> 


      <div id="condition-one">
      test1
     </div>

     <div id="condition-two">
      test2
    </div>
    </body>

jQuery检查单选框状态并显示一个元素

问题描述

3 个解决方案

解决方案1
0 已采纳 2014-11-25 19:26:24

解决方案2
0 2014-11-25 19:36:48

解决方案3
0 2014-11-25 19:43:33

jQuery检查单选框状态并显示一个元素

问题描述

3 个解决方案

解决方案1 0 已采纳 2014-11-25 19:26:24

解决方案2 0 2014-11-25 19:36:48

解决方案3 0 2014-11-25 19:43:33

解决方案1
0 已采纳 2014-11-25 19:26:24

解决方案2
0 2014-11-25 19:36:48

解决方案3
0 2014-11-25 19:43:33