How to use jQuery for listening if checkbox is changed not by clicking?

Question

I have a number of checkboxes that change state(checked ,not checked) using another jQuery statement:

Elements:

<input type="checkbox" id="select_a">select group A</input>
<input type="checkbox" id="select_b">select group B</input>
<input type="checkbox" id="mix">select mix</input>

<div id="group_a">
    <input type="checkbox" id="a_1">group A_1</input>
    <input type="checkbox" id="a_2">group A_2</input>
</div>
<div id="group_b">
    <input type="checkbox" id="b_1">group B_1</input>
    <input type="checkbox" id="b_2">group B_2</input>
</div>

JQUERY

jQuery("#select_a").click(function () {
    if (this.checked) jQuery("div#group_a input:checkbox").prop("checked", true);
    else jQuery("div#group_a input:checkbox").prop("checked", false);
});
jQuery("#select_b").click(function () {
    if (this.checked) jQuery("div#group_b input:checkbox").prop("checked", true);
    else jQuery("div#group_b input:checkbox").prop("checked", false);
});
jQuery("#mix").click(function () {
    if (this.checked) {
        jQuery("#a_1").prop("checked", true);
        jQuery("#b_1").prop("checked", true);
    } else {
        jQuery("#a_1").prop("checked", false);
        jQuery("#b_1").prop("checked", false);
    }
});

I need a way to set a listener to each checkbox in the groups, I used this way which works like this:

jQuery("div input:checkbox").click(function(e){
    alert(e.target.id);
});

but this only works if the checkbox was clicked by the mouse, I would like a way to fire an event(set a listener) for each checkbox if it was checked by something other than the mouse.

Demo

Checking the box with the keyboard acts as if you'd clicked it, and triggers the .click() handler. What problem are you really trying to solve? — Barmar
– Barmar, Commented Aug 12, 2015 at 7:30

Pranav C Balan · Accepted Answer · 2015-08-12 07:39:27Z

2

You can use change() event handler

jQuery("div input:checkbox").change(function(){
     alert(this.id);
});

edited Aug 12, 2015 at 7:39

answered Aug 12, 2015 at 7:20

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

Comments

score 1 · Accepted Answer · 2015-08-12 07:48:38Z

Try change event, also for the top controls use radio instead of checkbox as any one would be checked:

$(function() {
  var grp1 = $('#group_a').find('input[type=checkbox]');
  var grp2 = $('#group_b').find('input[type=checkbox]');
  $('input[name=grp]').on('change', function(e) {
    var id = this.id;
    grp1.prop('checked', 'select_a' === id);
    grp2.prop('checked', 'select_b' === id);
    if ('mix' === id) {
      grp1.eq(0).prop('checked', true);
      grp2.eq(0).prop('checked', true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- use radio with name -->
<input type="radio" name="grp" id="select_a" />select group A
<input type="radio" name="grp" id="select_b" />select group B
<input type="radio" name="grp" id="mix" />select mix

<div id="group_a">
  <input type="checkbox" id="a_1" />group A_1
  <input type="checkbox" id="a_2" />group A_2
</div>
<div id="group_b">
  <input type="checkbox" id="b_1" />group B_1
  <input type="checkbox" id="b_2" />group B_2
</div>

Collectives™ on Stack Overflow

How to use jQuery for listening if checkbox is changed not by clicking?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related