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方法而不是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/

Answer 2

我相信应用程序必须设置带有标记或未标记的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);
}

你see here。只需将其中一个输入设置为html检查。

Answer 3

如果这些只是两个Checkbox，那么你可以使用这样的

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

    var $this = $(this);

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

});

<强> Fiddle

如果选中/取消选中

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

    var $this = $(this);
    $('input[type="checkbox"]').not($this).prop('checked' , this.checked);
});

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

3 个答案: