我们在检查复选框时遇到问题。我们有下面的 div 结构，我们希望选项组中的复选框仅被选中一个。目前有 3 个选项组(主体、袖子、袖口)，每个选项组中有多个复选框。用户应在每组中仅选择一个复选框，即，在主体以及袖子和袖口中仅选择一个复选框。但我们无法只获得一张支票。但我们可以选中所有复选框。
$(".data-options-body").click(function() {
$(".data-options-body").attr("checked", false); //uncheck all checkboxes
$(this).attr("checked", true); //check the clicked one
});
$(".data-options-sleeves").click(function() {
$(".data-options-sleeves").attr("checked", false); //uncheck all checkboxes
$(this).attr("checked", true); //check the clicked one
});
$(".data-options-cuffs").click(function() {
$(".data-options-cuffs").attr("checked", false); //uncheck all checkboxes
$(this).attr("checked", true); //check the clicked one
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group required">
<label class="control-label">Body</label>
<div id="input-option152">
<div class="radio">
<span class="set-color" data-color="Blue">
<label for="option-value-754">
<input type="checkbox" class="data-options-body" name="option[152]" value="754" id="option-value-754" />
Blue
</label>
</span>
<span class="set-color" data-color="Red">
<label for="option-value-755">
<input type="checkbox" class="data-options-body" name="option[152]" value="755" id="option-value-755" />
Red
</label>
</span>
<span class="set-color" data-color="White">
<label for="option-value-762">
<input type="checkbox" class="data-options-body" name="option[152]" value="762" id="option-value-762" />
White
</label>
</span>
<span class="set-color" data-color="Black">
<label for="option-value-765">
<input type="checkbox" class="data-options-body" name="option[152]" value="765" id="option-value-765" />
Black
</label>
</span>
<span class="set-color" data-color="Grey">
<label for="option-value-761">
<input type="checkbox" class="data-options-body" name="option[152]" value="761" id="option-value-761" />
Grey
</label>
</span>
<span class="set-color" data-color="Yellow">
<label for="option-value-763">
<input type="checkbox" class="data-options-body" name="option[152]" value="763" id="option-value-763" />
Yellow
</label>
</span>
<span class="set-color" data-color="Green">
<label for="option-value-764">
<input type="checkbox" class="data-options-body" name="option[152]" value="764" id="option-value-764" />
Green
</label>
</span>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label">Sleeves</label>
<div id="input-option154">
<div class="radio">
<span class="set-color" data-color="Blue">
<label for="option-value-767">
<input type="checkbox" class="data-options-sleeves" name="option[154]" value="767" id="option-value-767" />
Blue
</label>
</span>
<span class="set-color" data-color="Red">
<label for="option-value-770">
<input type="checkbox" class="data-options-sleeves" name="option[154]" value="770" id="option-value-770" />
Red
</label>
</span>
<span class="set-color" data-color="Green">
<label for="option-value-768">
<input type="checkbox" class="data-options-sleeves" name="option[154]" value="768" id="option-value-768" />
Green
</label>
</span>
<span class="set-color" data-color="Grey">
<label for="option-value-769">
<input type="checkbox" class="data-options-sleeves" name="option[154]" value="769" id="option-value-769" />
Grey
</label>
</span>
<span class="set-color" data-color="Black">
<label for="option-value-766">
<input type="checkbox" class="data-options-sleeves" name="option[154]" value="766" id="option-value-766" />
Black
</label>
</span>
<span class="set-color" data-color="White">
<label for="option-value-771">
<input type="checkbox" class="data-options-sleeves" name="option[154]" value="771" id="option-value-771" />
White
</label>
</span>
<span class="set-color" data-color="Yellow">
<label for="option-value-772">
<input type="checkbox" class="data-options-sleeves" name="option[154]" value="772" id="option-value-772" />
Yellow
</label>
</span>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label">Cuffs</label>
<div id="input-option155">
<div class="radio">
<span class="set-color" data-color="Blue">
<label for="option-value-774">
<input type="checkbox" class="data-options-cuffs" name="option[155]" value="774" id="option-value-774" />
Blue
</label>
</span>
<span class="set-color" data-color="Red">
<label for="option-value-777">
<input type="checkbox" class="data-options-cuffs" name="option[155]" value="777" id="option-value-777" />
Red
</label>
</span>
<span class="set-color" data-color="Green">
<label for="option-value-775">
<input type="checkbox" class="data-options-cuffs" name="option[155]" value="775" id="option-value-775" />
Green
</label>
</span>
<span class="set-color" data-color="Black">
<label for="option-value-773">
<input type="checkbox" class="data-options-cuffs" name="option[155]" value="773" id="option-value-773" />
Black
</label>
</span>
<span class="set-color" data-color="White">
<label for="option-value-778">
<input type="checkbox" class="data-options-cuffs" name="option[155]" value="778" id="option-value-778" />
White
</label>
</span>
<span class="set-color" data-color="Grey">
<label for="option-value-776">
<input type="checkbox" class="data-options-cuffs" name="option[155]" value="776" id="option-value-776" />
Grey
</label>
</span>
<span class="set-color" data-color="Yellow">
<label for="option-value-779">
<input type="checkbox" class="data-options-cuffs" name="option[155]" value="779" id="option-value-779" />
Yellow
</label>
</span>
</div>
</div>
</div>最佳答案
我们希望选项组中的复选框仅被选中。目前有 3 个选项组(主体、袖子、袖口)，每个选项组中有多个复选框。用户应在每个组中仅选择一个复选框
我认为你需要的是radio而不是复选框。由于这是radio 的功能，因此在一组中只能选择一个选项。因此，将您的复选框更改为单选，然后重试。
关于javascript - Jquery单选复选框问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43799898/