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除外）对应于输入的默认值/ checkedness。 [ Ref]

＆＃13;

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

＆＃13;

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

＆＃13;

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()

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

您只需使用

即可

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

}    

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

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

6 个答案: