[英]HTML checkbox select one at a time per group
I've been trying some code to be able to check 1 checkbox at a time, but I also want to be able to check 1 box at a time in another group at the same time ( they work together ) 我一直在尝试一些代码,以便一次可以选中1个复选框,但是我也希望能够一次在另一个组中一次选中1个复选框(它们一起工作)
This is the code I've tried so far: 到目前为止,这是我尝试过的代码:
HTML HTML
Checkbox group1 复选框组1
<div class="modal-body">
Status to change:
<br><br>
<label for=".checkboxSanction">Sanction Status
<input type="checkbox" name="statusbox" value="Sanction Status" class="checkboxSanction">
</label><br>
<label for=".checkboxPep">Pep Status
<input type="checkbox" name="statusbox" value="PEP Status" class="checkboxPep">
</label><br>
<label for=".checkboxUnderage">Underage Status
<input type="checkbox" name="statusbox" value="Underage Status" class="checkboxUnderage">
</label><br><br>
Change status to:
Checkbox group2 复选框组2
<label for=".checkboxInvestigating">Investigating
<input type="checkbox" name="valuebox" value="2" class="checkboxInvestigating">
</label></br>
<label for=".checkboxClosed">Closed
<input type="checkbox" name="valuebox" value="10" class="checkboxClosed">
</label>
</div>
jQuery jQuery的
$("input:checkbox").on('click', function () {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
The problem here is that I can only check 1 box at a time, and that goes for all of the checkboxes ( as in both groups ) - I want to be able to check 1 per group. 这里的问题是我一次只能选中1个框,并且所有复选框都适用(就像在两个组中一样)- 我希望每个组都可以选中1个框。
Does anyone have an idea of how do solve this issue? 有谁知道如何解决这个问题? Thanks for helping!
感谢您的帮助!
Try this 尝试这个
$("input:checkbox").on('click', function() {
$("input:checkbox[name='"+$(this).attr('name')+"']").not($(this)).prop('checked', false);
});
Same concept as your example just a little more concise. 与您的示例相同的概念更加简洁。
EDIT: I've just properly checked your example and it works fine too see here 编辑:我刚刚正确检查了您的示例,它也可以正常工作,请参见此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.