Javascript jQuery检查单选框状态并显示元素_Javascript_Jquery

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

javascript jquery

Javascript jQuery检查单选框状态并显示元素,javascript,jquery,Javascript,Jquery,我试图显示另一组单选框的div，但仅取决于首先选择的单选按钮。如果选择选项一，我希望条件一div显示，如果选择选项二，我希望条件二div显示 $（文档）.ready（函数（）{ $（“#条件一”）.hide（）； $（“#条件二”）.hide（）；如果（$（“id=[选项一]”）是（“：选中”））{ $（“#可见状态一”）。显示（“慢速”）； }如果（$（“id=[选项二]”）是（“：选中”））{ $（“#可见条件二”）.show（“慢速”）； }; }); 您想要选项1还是选项2 选择

我试图显示另一组单选框的div，但仅取决于首先选择的单选按钮。
如果选择选项一，我希望条件一div显示，如果选择选项二，我希望条件二div显示

$（文档）.ready（函数（）{
$（“#条件一”）.hide（）；
$（“#条件二”）.hide（）；
如果（$（“id=[选项一]”）是（“：选中”））{
$（“#可见状态一”）。显示（“慢速”）；
}如果（$（“id=[选项二]”）是（“：选中”））{
$（“#可见条件二”）.show（“慢速”）；
};
});

您想要选项1还是选项2

选择1
选择2
如果选择选项1，则会看到此div

选择3
选择4
如果选择选项2，则会看到此div

备选案文5
备选案文6

在您的代码中，必须对用户输入（在本例中是一个无线电框）执行操作。您必须将“更改”事件附加到您的广播框，当用户更改状态时，将触发回调函数。
以下情况如何：
//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();

我只是做了一些类似的事情（工作）

$（文档）.ready（函数（）{
$（“#条件一”）.hide（）；
$（“#条件二”）.hide（）；
$（“.radio label”）.on（“更改”，函数（）{
if（$（'.radio label#1'）。是（':checked'））{//如果id=1的radiolabel是选中的
$（“#条件一”）.show（“slow”）；//显示条件一
$（“#条件二”）.hide（）；
}如果（$（“.radio label#2”）是（“：checked”））{
$（'条件二'）.show（“slow”）；
$（'条件一'）.hide（“慢速”）；
}
});
});
测试1
测试2
您在加载页面时进行测试，而不是在用户单击按钮时。我是jquery新手，有什么建议可以修复它？如果您想在有人更改输入时进行操作，请在演示中使用.change（）
@John，你的意思是说，如果选择了选项二，条件二应该是可见的吗？@George是的，对不起，我刚刚注意到我的打字错误，我会纠正的。我必须对html做些什么吗？我插入了你的.js来代替我的，但它仍然在做同样的事情。所有的元素都显示出来了，而不是隐藏这两个元素。我犯了一个严重的错误，我在hury xD。现在试试，我更新了代码。非常感谢，它工作得很好。我从来不知道更改选择器，看起来我还有更多的研究要做。它是change
事件，几乎每个用户输入元素都会触发它。更准确地说，在text
上，在blur
事件之后触发输入，这意味着元素失去焦点。另一个可以使用的事件是输入，它是键盘事件和更改事件的组合。虽然问题很简单，也许对学校来说，这是我也建议用于大规模应用程序或生产的实现，它易于维护，适用于多种情况，适合事件驱动插件。初学者应该开始保存这些聪明的代码片段，这就是我的建议：P
//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();

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