以编程方式更改复选框的选中

Question

我有以下两个复选框：

<input type="checkbox" id="id3"></input>
<input  type="checkbox" id="id4"></input>

期望的行为是，当我点击id3时，id4应该采用。

这适用于第一次和第二次点击，但不再是后来的。 任何想法为什么？

在这里我的脚本：

<script>
       function test2()
       {
         var checked = this.checked;
         if(checked)
            $("#id4").attr("checked", "checked");
         else
            $("#id4").removeAttr("checked");
       }    

       $("#id3").click(test2);
</script>

（或者在这里工作的道场http://dojo.telerik.com/eviTi ）

Answer 1

请使用prop而不是attr，建议在复选框上使用change事件而不是click事件。

attr执行DOM操作，但prop只是更改任何DOM的内部属性

  <script>


        function test2()
    {
      var checked = this.checked;

      if(checked)
      {
        $("#id4").prop("checked", "checked");
      }
      else
        $("#id4").prop("checked", false);
    }    

    $("#id3").change(test2);

</script>

Answer 2

使用change事件（而不是click ）并使用.prop方法而不是.attr

原因： 如果属性和具有相同名称的属性都存在，通常更新一个将更新另一个，但输入的某些属性不是这种情况，例如value和checked ：对于这些属性，属性始终表示当前状态，而属性（旧版本的IE除外）对应于输入的默认值/检查。 [ 参考 ]

 function test2() { $("#id4").prop("checked", this.checked); } $("#id3").change(test2); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="checkbox" id="id3"> <input type="checkbox" id="id4"> 

Answer 3

使用.prop（）代替.attr()

像这样

 function test2() { var checked = this.checked; if(checked) $("#id4").prop("checked", "checked"); else $("#id4").removeAttr("checked"); } $(document).ready(function(){ $("#id3").click(test2); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" id="id3"></input> <input type="checkbox" id="id4"></input> 

Answer 4

使用.prop()代替.attr()

function test2()
    {
      var checked = this.checked;
      if(checked)
      {
        $("#id4").prop("checked", "checked");
      }
      else
        $("#id4").removeAttr("checked");
    }    

Answer 5

我改变了你的代码，但问题是attr() 。 请改用prop()

 $("body").on("change","#id3",function(){ if($(this).is(":checked")){ $("#id4").prop("checked","checked"); } else{ $("#id4").removeProp("checked"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" id="id3"></input> <input type="checkbox" id="id4"></input> 

Answer 6

你可以简单地使用

function test2()
{
  var checkBox = $("#id4");
  checkBox.prop("checked", !checkBox.prop("checked")); 

}    

$("#id3").click(test2);