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

Programmatically change checked of a checkbox

本文关键字：选项 复选框 编程 方式更      更新时间：2023-09-26

我有以下两个复选框:

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

(或工作dojo在这里http://dojo.telerik.com/eviTi)

请使用prop而不是attr，并且建议在复选框上使用更改事件而不是单击事件。

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>

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

使用 .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>

用.prop()代替.attr() 

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

我改变了你的代码，但问题是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>

你可以直接使用

function test2()
{
  var checkBox = $("#id4");
  checkBox.prop("checked", !checkBox.prop("checked")); 
}    
$("#id3").click(test2);
相关文章：