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

【问题标题】：Programmatically change checked of a checkbox以编程方式更改选中的复选框
【发布时间】：2016-11-05 20:39:39
【问题描述】：

我有以下两个复选框：

<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）

【问题讨论】：

恕我直言 - 不要混合使用 javascript 和 jquery。

标签： javascript jquery html

【解决方案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>

【讨论】：

【解决方案2】：

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

原因： 如果同名的属性和属性都存在，通常更新一个会更新另一个，但对于输入的某些属性并非如此，例如value 和checked：对于这些属性，属性始终代表当前状态，而属性（旧版本的 IE 除外）对应于输入的默认值/检查状态。 [Ref]

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">

【讨论】：

感谢您的回答。请问为什么改不点击？
@gsharp – 参考jQuery difference between change and click event of checkbox 虽然这不是不工作的原因

【解决方案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>

【讨论】：

【解决方案4】：

使用.prop() 而不是.attr()

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

你可以简单地使用

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

}    

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

【讨论】：