jquery - jquery复选框检查不起作用

Question

我有一个小脚本，功能非常简单。如果未选中该复选框，则如果用户单击它，则显示一个 div，否则当用户单击它时隐藏该 div。该脚本是（它在 PHP 代码中）：

echo 
'<script> 
$(document).ready(function(){

if($("#chk_id'.$bank_name.'").is(":checked"))
{


   $("#chk_id'.$bank_name.'").click(function(){
      $("#form_show'.$bank_name.'").hide(300);
   });

}
else
{ 

    $("#chk_id'.$bank_name.'").click(function(){

    //alert("ddd");

    $("#form_show'.$bank_name.'").show(300);
   });
}
});    


</script>';

但问题是虽然 show div 正在工作，但我无法隐藏 div ！怎么了？javascript库：<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

尝试这个：

$(document).ready(function(){
    $('body').on('click', "#chk_id'.$bank_name.'", function() {
        if($("#chk_id'.$bank_name.'").is(":checked")) {
            $("#form_show'.$bank_name.'").hide(300);
        } else {
            $("#form_show'.$bank_name.'").show(300);
        }
    });
});

Answer 2

我认为你的功能应该是这样的：

function checkBankName(){
    if($("#chk_id'.$bank_name.'").is(":checked"))
    {
        $("#form_show'.$bank_name.'").show(300);
    }
    else
    {
        $("#form_show'.$bank_name.'").hide(300);
    }
}

$(document).ready(function(){
    // first time
    checkBankName();

    // on check
    $("#chk_id'.$bank_name.'").click(function(){
        checkBankName();
    });
});   

Answer 3

尝试这个：

演示

 $("#chk_id").click(function(){
       if($('#chk_id:checked').length > 0){
          $('.bank_name').hide(300);
       }
       else{
          $('.bank_name').show(300);
       }
   });

我猜到了你的 html 实现。您可能不需要#form_show在选择器中包含 。

或者，您可以使用切换来执行以下操作：

切换演示

// code to initialize state before click

$("#chk_id").click(function(){    
    $('.bank_name').toggle(300);            
});

希望这可以帮助

Answer 4

此处另一个答案的简化版本：

$(document).ready(function() {
    $("#chk_id' . $bank_name . '").change(function() {
        $("#form_show' . $bank_name . '")[this.checked ? 'show' : 'hide'](300);
    }).change();
});