javascript - Programmatically change checked of a checkbox - Stack Overflow

admin管理员组

文章数量:1356850

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 )

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./eviTi)

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 22, 2019 at 11:11 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Jul 4, 2016 at 7:37 gsharpgsharp 27.9k2626 gold badges9292 silver badges137137 bronze badges 1

• IMHO - don't mix javascript and jquery. – Gauthaman Sahadevan Commented Jul 4, 2016 at 7:49

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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>

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./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" id="id3">
<input type="checkbox" id="id4">

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="id3"></input>
<input  type="checkbox" id="id4"></input>



   

Use .prop() instead of .attr()

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

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="id3"></input>
<input  type="checkbox" id="id4"></input>

You can simply use

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

}    

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

本文标签： javascriptProgrammatically change checked of a checkboxStack Overflow