Question

jQuery不是我强大的一面:-)我不知道如何添加到我的功能新功能。我想在检查无线电值时在html中显示隐藏的div。现在，当我点击单选按钮时脚本显示div：

<script type="text/javascript">
    $(document).ready(function(){
      $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
      });
    });
</script>

Answer 1

是否选中了单选按钮，您可以使用此

进行检查

if( $(".radio").prop("checked") ) {
    /*means that is checked*/
}

请参阅下面的代码段

    $(document).ready(function(){
      $('input[type="radio"]').click(function(){
        if( $(this).prop("checked") ) {
            var inputValue = $(this).attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
  	    }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
AA - <input type="radio" name="test" value="aa" /><br>
BB - <input type="radio" name="test" value="bb" /><br>
CC - <input type="radio" name="test" value="cc" /><br>

<div class="box aa" style="display: none">BOX AA</div>
<div class="box bb" style="display: none">BOX BB</div>
<div class="box cc" style="display: none">BOX CC</div>

Answer 2

你的建议不起作用检查片段下方。检查是标记，但它没有显示DIV - 你必须点击它

    $(document).ready(function(){
      $('input[type="radio"]').click(function(){
        if( $(this).prop("checked") ) {
            var inputValue = $(this).attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
  	    }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
AA - <input type="radio" name="test" value="aa" checked="checked"/><br>
BB - <input type="radio" name="test" value="bb" /><br>
CC - <input type="radio" name="test" value="cc" /><br>

<div class="box aa" style="display: none">BOX AA</div>
<div class="box bb" style="display: none">BOX BB</div>
<div class="box cc" style="display: none">BOX CC</div>

jQuery - 选中单选按钮

2 个答案: