Question

我试图显示另一组收音机的div，但仅取决于首先选择哪个单选按钮。
如果选择了选项一，我想条件一个div显示，如果选择选项二，我想条件二div显示。

＆＃13;

$(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");
  };
});

＆＃13;

<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>

＆＃13;

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");
    }
  });
});

在您的代码中，必须对用户输入执行操作，在本例中为单选框。您必须在收音机框中附加“更改”事件，当用户更改状态时，将触发回调功能。

Answer 2

以下内容如何：

//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

Answer 3

我刚刚做了类似的事情（工作）

  <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 个答案: