我有 2 个主要复选框“ja”和“nee”。当检查其中一个复选框时,它会打开一个具有1个或更多复选框的子菜单。这些子复选框也是“ja”和“nee”,并响应主复选框中的选择。我遇到的问题是用户可以在主复选框中选择“nee”,然后将所有子复选框更改为“ja”,但是主复选框保持在“nee”,但它必须切换到“ja”复选框。
我已经做到了,所以问题只有 2 个复选框,并且只有它们可以有一个选中的属性,并且子复选框位于一个名为“子菜单”的 div 类中。
我认为解决这个问题的方法是检查子菜单中是否选中了任何“nee”类子复选框。如果它是主复选框,则保留在“nee”,否则从“nee”主复选框中删除选中的属性并将其切换到“ja”复选框。但显然我无法弄清楚如何做到这一点。
我做了一个小的 jsFiddle 来展示这个项目:http: //jsfiddle.net/B2zs5/
<div>
<p>Heb je DigiD?</p>
<div class="antwoorden">
<input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
<input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label>
<div class="extra_info">?
<div class="extra_info_popup">
Hidden tekst
</div>
</div>
</div>
</div>
这是jQuery代码
$('.open_sub_ja').click(function () {
$(this).parents('.container_vragen').find('.ja').attr('checked', this.checked);
$(this).parents('.container_vragen').find('.nee').removeAttr('checked');
});
$('.open_sub_nee').click(function () {
$(this).parents('.container_vragen').find('.ja').removeAttr('checked');
$(this).parents('.container_vragen').find('.nee').attr('checked', this.checked);
});
$('.ja').click(function () {
$(this).parents('.antwoorden').find('.ja').attr('checked', this.checked);
$(this).parents('.antwoorden').find('.nee').removeAttr('checked');
});
$('.nee').click(function () {
$(this).parents('.antwoorden').find('.ja').removeAttr('checked');
$(this).parents('.antwoorden').find('.nee').attr('checked', this.checked);
});
如果我猜它会是这样的,
if('.nee'.attr('checked')) {
// do nothing
}
else {
$('.open_sub_nee').removeAttr('checked');
$('.open_sub_ja').attr('checked');
}