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 的变量值，我无法处理标签为 One 的复选框上的 onclick 事件。

我已经试过了，效果很好，但我不想使用 check_1，因为数字 1 是可变的，可以更改。

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

我无权修改 html，我该怎么做？

Answer 1

看起来您唯一的标准是 label 的文本，因此您可以根据该标签定位输入，例如：

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

希望对您有所帮助。

Answer 2

您可以使用这样的选择器 $('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>

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

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

javascript

checkbox

jquery

jquery-selectors