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
– Gauthaman Sahadevan

2016-07-04 07:49:29 +00:00
Commented Jul 4, 2016 at 7:49 — Gauthaman Sahadevan
– Gauthaman Sahadevan, Commented Jul 4, 2016 at 7:49

Akash Bhardwaj · Accepted Answer · 2016-07-04 08:03:03Z

3

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>

answered Jul 4, 2016 at 8:03

Akash Bhardwaj

393 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:32:56Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 4, 2016 at 7:40

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

2 Comments

gsharp Over a year ago

Thanks for your answer. may i ask why change and not click?

Rayon Over a year ago

@gsharp – refer jQuery difference between change and click event of checkbox though that is not the reason of Not working

Rohit Azad Malik · Accepted Answer · 2016-07-04 07:42:18Z

2

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>

answered Jul 4, 2016 at 7:42

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Comments

Jayesh Chitroda · Accepted Answer · 2016-07-04 07:41:33Z

1

Use .prop() instead of .attr()

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

answered Jul 4, 2016 at 7:41

Jayesh Chitroda

5,03915 silver badges18 bronze badges

Comments

Roxoradev · Accepted Answer · 2016-07-04 07:43:29Z

1

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>

answered Jul 4, 2016 at 7:43

Roxoradev

9034 silver badges13 bronze badges

Comments

Arpit Kumar · Accepted Answer · 2016-07-04 07:55:09Z

1

You can simply use

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

}    

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

answered Jul 4, 2016 at 7:55

Arpit Kumar

2,2495 gold badges32 silver badges56 bronze badges

Collectives™ on Stack Overflow

Programmatically change checked of a checkbox

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related