以編程方式更改復選框的選中

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