选择第二个复选框也会选择第一个

Question

我有一个带有两个复选框的表单，允许用户根据提出的问题选择是或否。现在，当我选择第二个复选框时，第一个复选框也被选中，这是我不想要的。当我说第二个容器内的区域被单击时，您必须直接单击复选框区域（标签或容器的其余部分不会像第一个复选框那样选择复选框，它的容器会）。因此，当您直接单击第二个复选框时，它也会检查第一个。

我的问题是，为什么它允许我检查第一个容器中的任何地方，而不是第二个容器？另外，当我只想选择第二个时，为什么选择第一个？

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>

表格图片：

Answer 1

您有两个标签 for="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>

Answer 2

label 和 input 对象都引用“checkbox1”并且不是唯一的。确保第二个 label 和 input 标记是唯一的。