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

Question

I have the following two checkboxes:

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

the desired behaviour is that when i click on id3, id4 should adopt.

that works fine for the first and second click but aftwerwards not anymore. any idea why?

here my script:

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

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

(or a working dojo here http://dojo.telerik.com/eviTi )

Answer 1

Please use prop rather than attr and it's advisable to use change event on checkbox instead of the click event.

attr does DOM manipulation but prop just changes the internal property of any 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

Use change event(not click ) and play with .prop method instead of .attr

Reason: Where both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as value and checked : for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value/checkedness of the input. [ 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"> 

Answer 3

Use .prop() instead of .attr()

as like this

 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

Use .prop() instead of .attr()

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

Answer 5

I changed your code but the problem is attr() . Use prop() instead

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

You can simply use

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

}    

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