JQuery "onchange" event on just one checkbox among multiple in a group based on label text

Question

I have a group of checkboxes as -

<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>&nbsp;

<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>&nbsp;

<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>

Due to variable values of id and name, I'm unable to handle onclick event on checkbox with label One.

I've tried this which works fine, but I don't want to use check_1 since the number 1 is variable and could be changed.

$("#check_1").change(function() {
  alert('Checkbox One is clicked');
});

How do I do this as I have no access to modify the html ?

@philantrovert In that case how will I check the next label is one which is being checked ? — jitendrapurohit, Dec 06 '16 at 11:31
Possible duplicate of [Find html label associated with a given input](http://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input) — John Wu, Dec 06 '16 at 11:35

score 5 · Accepted Answer · answered Dec 06 '16 at 11:35

5

You can use a selector like this $('input[type="checkbox"]:has(+ label:contains("One"))') with the label text as below,

$('input[type="checkbox"]:has(+ label:contains("One"))').on('click', function(){
  alert('Checkbox One is clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>&nbsp;

<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>&nbsp;

<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>

answered Dec 06 '16 at 11:35

Aruna

11,959
3
28
42

This works fine, is there any cleaner way ? will accept this if I don't find any +1 – jitendrapurohit Dec 06 '16 at 11:37
If you want to find the checkbox by the label text then this is the cleaner `jquery` way of selector. If you need to find by any other logic, please let me know and I will update the answer – Aruna Dec 06 '16 at 11:39
@jitendrapurohit Performance wise its good as this is using the single selector rather than manipulating the `dom` with multiple selectors – Aruna Dec 06 '16 at 11:45

Zakaria Acharki · Answer 2 · 2016-12-06T11:40:52.307

1

Looks like your only criteria is the text of the label so you could target the input based on that label like :

$('label:contains("One")').prev('input:checkbox').change(function(){
    console.log('One changed');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>&nbsp;

<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>&nbsp;

<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>

Hope this helps.

edited Dec 06 '16 at 11:40

answered Dec 06 '16 at 11:32

Zakaria Acharki

66,747
15
75
101

I don't want to fire the alert event on Two and Three option check – jitendrapurohit Dec 06 '16 at 11:32
You could do that based on the label text, check my update. – Zakaria Acharki Dec 06 '16 at 11:35
Working, Thanks +1. But this doesn't make sure the click input is a checkbox :( – jitendrapurohit Dec 06 '16 at 11:40

JQuery "onchange" event on just one checkbox among multiple in a group based on label text

2 Answers2