jquery checkbox checked toggle when click of a button

Question

I want to toggle the checkbox on click of button.

Here is my jQuery

$("#choose_address2").on("click", function () { 
   console.log("click!!! address2");
   var $checkbox = $(this).find(':checkbox');
   var checkBoxes = $("input[name=checkbox]]");
   checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});

Here is my Input

<span id="choose_address2" class="btn btn-info">
<i class="fa fa-plus-circle"></i>เพิ่มที่อยู่
<input type="checkbox" name="choose_address" {{#if customer.addresses}}checked{{/if}} id="choose_address1" hidden>
</input></span>

By default the button is checked. however when i click the span with id choose_address2 I want to change the state. Any suggestions will be highly appreciated.

try this: $checkbox.prop("checked", !$checkbox.prop("checked")); — kp singh
– kp singh, Commented Feb 2, 2016 at 11:46

Prashant · Accepted Answer · 2016-02-02 11:50:41Z

7

Try This

$("#choose_address2").on("click", function () { 
   console.log("click!!! address2");
   var $checkbox = $(this).find(':checkbox');
   var checkBoxes = $("input[type='checkbox']");
   if(checkBoxes.prop("checked")==true)
     checkBoxes.prop("checked", false); 
   else
     checkBoxes.prop("checked", true)
});

Or This also work

$("#choose_address2").on("click", function () { 
   console.log("click!!! address2");
   var $checkbox = $(this).find(':checkbox');
   var checkBoxes = $("input[type='checkbox']");
   (checkBoxes.prop("checked")==true)?checkBoxes.prop("checked", false):checkBoxes.prop("checked", true);       

});

answered Feb 2, 2016 at 11:50

Prashant

3852 silver badges8 bronze badges

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

Comments

kp singh · Accepted Answer · 2016-02-02 12:04:26Z

3

$("#choose_address2").on("click", function() {
     var $checkbox = $(this).find(':checkbox');
     $checkbox.prop("checked", !$checkbox.prop("checked"));
});

answered Feb 2, 2016 at 12:04

kp singh

1,4609 silver badges22 bronze badges

Comments

Siddhartha Chowdhury · Accepted Answer · 2016-02-02 12:10:53Z

1

Heres an example

HTML

<input type="checkbox" class="toggle" checked>
<input type="checkbox" class="toggle">
<button id="choose_address2">
 Toggle checkbox
</button>

JQ

$('#choose_address2').click(function(){
   $('.toggle').each(function(){
     $(this).prop('checked', !$(this)[0].checked);
  })
})

Demo http://jsfiddle.net/mPstq/94/

edited Feb 2, 2016 at 12:10

answered Feb 2, 2016 at 11:57

Siddhartha Chowdhury

2,7241 gold badge31 silver badges50 bronze badges

Comments

Unicco · Accepted Answer · 2020-08-26 13:10:05Z

1

Easiest way to tackle this:

$checkbox.prop( 'checked', ! $checkbox.is( ':checked' ) );

answered Aug 26, 2020 at 13:10

Unicco

2,5861 gold badge30 silver badges32 bronze badges

Comments

John Hascall · Accepted Answer · 2016-02-02 19:01:59Z

0

Thank you all for you suggestion..

This did the trick for me :

$("#choose_address2").click(function(){
   var checkBox = $("#choose_address1");
   console.log("click!!! address2");
   checkBox.trigger('click');
});

edited Feb 2, 2016 at 19:01

John Hascall

9,4446 gold badges51 silver badges73 bronze badges

answered Feb 2, 2016 at 12:02

Sijan Shrestha

2,2848 gold badges30 silver badges52 bronze badges

Collectives™ on Stack Overflow

jquery checkbox checked toggle when click of a button

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related