jQuery檢查單選框狀態並顯示一個元素

Question

我試圖顯示另一組單選框的div，但僅取決於首先選擇哪個單選按鈕。
如果選擇了選項選項一，則希望顯示條件一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");
    }
  });
});

在您的代碼中，必須在用戶輸入（在這種情況下為單選框）上執行操作。 您必須在單選框上附加一個“更改”事件，並且當用戶更改狀態時，將觸發回調函數。

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 個解決方案

解決方案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