Question

我有两个单选按钮。我需要根据选中的单选按钮隐藏/显示div标签

我在加载正文时选择一个单选按钮（实际上它是基于db值）。

我需要输出的是，我需要在身体加载过程中隐藏/显示div标签，但是基于所选的单选按钮。

这是我试过的代码。

<html>
       <head>
             <title>show-hide-div-on-click-using-jquery</title>

</head>
 <?php
 $r="r2";

echo "<body onload=\"calls('$r')\">";?>
     <center>
              <div style="padding:25px;width: 100px;">
                   <input id="id1" type="radio" name="name_radio1" value="r1" />Radio1
                   <input id="id2" type="radio" name="name_radio1" value="r2" />Radio2
              </div>
              <div align="center" style="padding:25px;width: 300px;">
                   <div id="div1">This is First (1st) division</div>
                   <div id="div2">This is Second (2nd) division</div>
              </div>
     </center>
     <script src="js/jquery-1.11.1.min.js"></script>
             <script type="text/javascript">
                 $(document).ready(function () {
                    $('#id1').click(function () {
                       $('#div2').hide();
                       $('#div1').show();
                });
                $('#id2').click(function () {
                      $('#div1').hide();
                      $('#div2').show();
                 });
               });
                 function calls (r) {
                   if(r=="r1"){
    document.getElementById('id1').checked=true;
}
else{
    document.getElementById('id2').checked=true;
}
                 }
</script>
</body>
</html>

但是这段代码没有像我预期的那样工作。当我点击一个单选按钮时，它会隐藏/显示div标签。

我知道我必须更改任何其他click，因为此功能仅适用于单击单选按钮，但我不知道该使用什么而不是click。

Answer 1

在document.ready来电中，您可以根据您在php中设置的单选按钮的已检查属性，立即设置您需要显示的div。您可以通过选中＆＃34;选中＆＃34;来执行此操作。通过jQuery这样的属性：

if ($('#id1').prop("checked") == true) {
    $('#div2').hide();
    $('#div1').show();
} else {
    $('#div1').hide();
    $('#div2').show();
}

工作小提琴：http://jsfiddle.net/gmm3j/

Answer 2

您可以将其委托给一个事件，而不是使用ID并拥有2个单独的点击事件。以及创建一个功能来检查选择了哪个按钮。

$(document).ready(function () {
    radioChecked();
    $('input[type="radio"]').change(function(){
        radioChecked();
    });

    function radioChecked(){
        if($('#id1').prop("checked") == true){
            $('#div1').show();
            $('#div2').hide();
        }
        else {
            $('#div1').hide();
            $('#div2').show();
        }
    }
});

Working demo

Answer 3

也许这样的事情会起作用（未经测试的代码）：

$('[name=name_radio1]').change(function(){
    if ($('#id1').is(":checked") {
        $('#div2').hide();
        $('#div1').show();
    } else {
        $('#div1').hide();
        $('#div2').show();
    }
});

甚至

$('[name=name_radio1]').change(function() {
    $('#div2, $div1').toggle();
});

如何隐藏/显示基于所选单选按钮的div元素

3 个答案: