1

我有两个带有名为标题 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')
}

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

4

3 回答 3

2

closest选择元素的最近父元素而不是最近的兄弟元素，如果要修改checked输入的属性，则应使用propmethod 而不是is.

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/

于 2012-11-05T21:28:03.450 回答
1

我相信应用程序必须将html的输入设置为标记或不标记，对吗？根据这个前提，我相信解决方案是这样的： 

var headlineA = $("label:contains('HEADLINE A')").prev('input');
var headlineB = $("label:contains('HEADLINE B')").prev('input');

headlineA.attr('disabled', true);
headlineB.attr('disabled', true);

if(headlineA.is(':checked')){
    headlineB.attr('disabled', false);
}
if(headlineB.is(':checked')){
    headlineA.attr('disabled', false);
}

你看这里。只需将其中一个输入设置为 html 检查。

于 2012-11-05T21:39:00.460 回答
0

如果这些是仅有的两个复选框，那么您可以使用类似这样的东西

$('input[type="checkbox"]').on('click', function() {

    var $this = $(this);

    if( $this.is(':checked')){
        $('input[type="checkbox"]').not($this).prop('checked' , true);
    }

});​

小提琴

如果选中/取消选中

$('input[type="checkbox"]').on('click', function() {

    var $this = $(this);
    $('input[type="checkbox"]').not($this).prop('checked' , this.checked);
});​
于 2012-11-05T21:28:16.423 回答