點擊基於標籤名稱的複選框

我有兩個標籤名爲標題A和標題B的複選框。我試圖想出一個方法來激活標題B的複選框，如果標題A的複選框被選中 - 反之亦然。點擊基於標籤名稱的複選框

<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') 
}

我是否使用正則表達式匹配單詞「標題」，然後提出相應的操作？

來源

2012-11-05 mrtonyb

你不能添加ID或類到複選框嗎？ 'is'不會改變複選框的'checked'屬性。 – undefined

在這種特殊情況下，系統不會爲這些元素生成唯一的ID和類。這對我來說是一個很大的挑戰。我必須定位標籤標籤內的數據。 – mrtonyb

如果我們知道結構，您可以使用相對選擇器，如.next（'input'）並跳過整個ID業務。 –

我相信，應用程序必須設置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檢查。

來源

2012-11-05 21:39:00

在您的示例中，這兩個複選框默認爲禁用。當我檢查標籤爲'標題A'的框時，我想要做的是在標題爲'標題B'的複選框中進行檢查。反之亦然。用戶可以先檢查標題A，並預期會看到標題B的檢查。 – mrtonyb

請檢查我的更新，看看你是否需要這個：http://jsfiddle.net/JeBbE/1/ –

太好了，弗雷德。我的工作很好。謝謝。 – mrtonyb

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/

來源

2012-11-05 21:28:03 undefined

你的解決方案給了我我需要的東西。非常感謝大家。 – mrtonyb

如果這些都是隻有兩個複選框，那麼你可以使用這樣的東西

$('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); 
});

來源

2012-11-05 21:28:16

此解決方案的問題在於您是否有其他不需要干擾的複選框。正如作者所說，它需要通過標籤來推斷這些值。 –

點擊基於標籤名稱的複選框

回答

相關問題