我们在选中复选框时遇到问题。我们在div结构下面，我们希望选项组中的复选框只选择一个。目前有3个选项组（Body，Sleeves，Cuffs），在每个选项组中我们有多个复选框。用户应该每组只选择一个复选框，即在体内只选择一个复选框以及袖子和袖口。但我们无法只检查一个。但我们可以检查所有复选框。
$(".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>
答案 0 :(得分：1)
我们希望选项组中的复选框只能选中一个。目前有3个选项组（Body，Sleeves，Cuffs），在每个选项组中我们有多个复选框。用户应该每组只选择一个复选框
我认为你需要radio不是复选框。由于这是radio的功能，因此在一个组中只选择了一个选项。因此，将您的复选框更改为收音机，然后重试。
答案 1 :(得分：0)
prop()获取指定的DOM属性，而attr()获取指定的HTML属性。这就是您应该使用prop()。
$(".data-options-sleeves").prop("checked", false);