javascript - 单击基于标签名称的复选框

Question

我有两个带有名为标题 A 和标题 B 标签的复选框。我正在尝试想出一种方法，如果标题 A 的复选框被选中，则激活标题 B 的复选框，反之亦然。

<input type="checkbox">
<label>HEADLINE A</label>

<input type="checkbox">
<label>HEADLINE B</label>

这就是我的出发点，但恐怕还差得远。

if($("label:contains('HEADLINE A')").closest('input').is(':checked')){
$("label:contains('HEADLINE B')").closest('input').is(':checked')
} 

我是否使用正则表达式来匹配“标题”一词，然后提出适当的操作？

Answer 1

closest 选择元素的最近父元素而不是最近的兄弟元素，如果你想修改输入的 checked 属性你应该使用 prop 方法而不是 是 。

if ( $("label:contains('HEADLINE A')").prev('input').is(':checked') ) {
    $("label:contains('HEADLINE B')").prev('input').prop('checked', true)
} 

或者:

var state = $("label:contains('HEADLINE A')").prev('input').is(':checked');
$("label:contains('HEADLINE B')").prev('input').prop('checked', state);

如果您想根据更改事件修改 checked 属性，您可以尝试:

$('input[type=checkbox]').filter(function() {
    return $(this).next().text() === 'HEADLINE A'
}).change(function() {
    $("label:contains('HEADLINE B')").prev('input').prop('checked', this.checked)
})

http://jsfiddle.net/FvLyJ/