基于标签文本的组中多个复选框中的一个复选框上的JQuery"onchange"事件

Question

我有一组复选框 -

<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>

由于变量值id和name,我无法与标签复选框处理onclick事件One.

我试过这个工作正常,但我不想使用,check_1因为数字1是可变的,可以更改.

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

我怎么做,因为我无权修改HTML？

Answer 1

您可以使用这样的选择器和$('input[type="checkbox"]:has(+ label:contains("One"))')标签文本,如下所示,

$('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>