Question

我有两个复选框，在选中时会显示一个文本框。下面的代码有效，尽管我认为效率不是很高。我想知道是否有一种简单的方法来组合复选框的“已检查”代码，以防万一您有两个以上。注意，我没有使用.toggle方法。第一个原因是因为不清楚是否最初选中了复选框。其次，我阅读了不推荐使用.toggle方法。但是也许其他人认为在这种情况下我还是应该使用它。

jQuery(document).ready(function() {
    //initial check
    show_hide();    

    $(".checkbox1").change(function() {
        show_hide();        
    });
    $(".checkbox2").change(function() {
        show_hide();            
    });

    function show_hide(){
        if($(".checkbox1").prop('checked') == true) {
            $("#textbox1").show();
        } else {
            $("#textbox1").hide();
        }   
        if($(".checkbox2").prop('checked') == true) {
            $("#textbox2").show();
        } else {
            $("#textbox2").hide();
        }   
    }
});

Answer 1

这可能是比您更有效的代码示例。将相同的class与唯一的ID一起使用。

$('.check_box').change(function(){
    if($('.check_box:checked').length==0){
        $('.checkbox').show();
    }else{
        $('.checkbox').hide();
        $('.check_box:checked').each(function(){
            $('#'+$(this).attr('data-ptag')).show();
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="sb1" class="checkbox">Checkbox One</p>
<p id="sb2" class="checkbox">Checkbox Two</p>

   <input name="chk1" class="check_box" type="checkbox" data-ptag="sb1" id="chk1" value="">Check Box1
   <input name="chk2" class="check_box" type="checkbox" data-ptag="sb2" id="chk2" value="">Check Box2

jQuery显示和隐藏多个文本框

1 个答案: