我有一个带有两个复选框的表单,允许用户根据提出的问题选择是或否。现在,当我选择第二个复选框时,也会选中第一个复选框,这是我不想要的。当我说第二个容器中的区域被点击时,你必须直接点击复选框区域(标签或容器的其余部分不会选中复选框,如第一个复选框,它的容器将)。所以当你直接点击第二个复选框时,它也会检查第一个复选框。
我的问题是,为什么它允许我检查第一个容器内的任何地方,而不是第二个容器?另外,当我只想选择第二个时,为什么第一个被选中?
HTML(忽略将移动到stylesheet.css的内联CSS):
<div style="background: #FFF; width: 1200px; height: 700px; display: block; margin: 100px auto; overflow: auto;">
<div style="display: block; margin: 30px auto; height: 400px; width: 1000px">
<h4 style="font-family: 'Lato', sans-serif; margin-top: 90px; letter-spacing: 1px;"><strong>Blah blah blah?</strong></h4>
<div class="inline field" style="max-width: 500px;">
<form role="form" action="" style="margin-top: 60px;">
<div class="checkbox" style="height: 50px; border: 2px solid #f8f8f8; border-radius: 2px;">
<label for="checkbox1" style="height: 46px; padding-top: 14px; width: 500px;">
<input type="checkbox" id="checkbox1" class="checkbox-circle" value="true" style="background: red; margin-right: 20px;" />
Yes</label>
</div>
<div class="checkbox" style="height: 50px; border: 2px solid #f8f8f8; border-radius: 2px;">
<label for="checkbox1" style="height: 46px; padding-top: 14px; width: 500px;">
<input type="checkbox" id="checkbox1" class="checkbox-circle" value="true" style="background: red; margin-right: 20px;" />
No</label>
</div>
</form>
</div>
</div>
</div>
表单图片:
答案 0 :(得分:1)
您有两个标签=“checkbox1”,两个ID都相同。这些应该是不同的。
<div class="checkbox">
<label for="checkbox1" >
<input type="checkbox" id="checkbox1" />
Yes</label>
</div>
<div class="checkbox">
<label for="checkbox2" >
<input type="checkbox" id="checkbox2" />
No</label>
</div>
答案 1 :(得分:1)
label
和input
个对象都引用&#34; checkbox1&#34;并不是唯一的。确保第二个label
和input
标记是唯一的。