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

时间:2017-12-08 17:43:51

标签: html css checkbox

我有一个带有两个复选框的表单,允许用户根据提出的问题选择是或否。现在,当我选择第二个复选框时,也会选中第一个复选框,这是我不想要的。当我说第二个容器中的区域被点击时,你必须直接点击复选框区域(标签或容器的其余部分不会选中复选框,如第一个复选框,它的容器将)。所以当你直接点击第二个复选框时,它也会检查第一个复选框。

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

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>

表单图片:

enter image description here

2 个答案:

答案 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)

labelinput个对象都引用&#34; checkbox1&#34;并不是唯一的。确保第二个labelinput标记是唯一的。