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

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

您有两个标签=“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个对象都引用＆＃34; checkbox1＆＃34;并不是唯一的。确保第二个label和input标记是唯一的。