Programmatically change checked of a checkbox

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)

IMHO - don't mix javascript and jquery. – Gauthaman Sahadevan Jul 04 '16 at 07:49 — Gauthaman Sahadevan, Jul 04 '16 at 07:49

score 3 · Answer 1 · answered Jul 04 '16 at 08:03

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>

score 2 · Accepted Answer · edited May 23 '17 at 12:32

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

edited May 23 '17 at 12:32

Community

1
1

answered Jul 04 '16 at 07:40

Rayon

36,219
4
49
76

Thanks for your answer. may i ask why change and not click? – gsharp Jul 04 '16 at 07:43
1

@gsharp – refer [__jQuery difference between change and click event of checkbox__](http://stackoverflow.com/questions/11205957/jquery-difference-between-change-and-click-event-of-checkbox) though that is not the reason of _Not working_ – Rayon Jul 04 '16 at 07:45

score 2 · Answer 3 · answered Jul 04 '16 at 07:42

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>

score 1 · Answer 4 · answered Jul 04 '16 at 07:41

1

Use .prop() instead of .attr()

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

answered Jul 04 '16 at 07:41

Jayesh Chitroda

4,987
13
18

score 1 · Answer 5 · answered Jul 04 '16 at 07:43

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>

score 1 · Answer 6 · answered Jul 04 '16 at 07:55

1

You can simply use

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

}    

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

answered Jul 04 '16 at 07:55

Arpit Kumar

2,179
5
28
53

Programmatically change checked of a checkbox

6 Answers6