2番目のチェックボックスを選択すると、最初のチェックボックスも選択されます

Question

2つのチェックボックスがあるフォームを使用して、質問された質問に基づいて「はい」または「いいえ」を選択できます。ここで2番目のチェックボックスを選択すると、最初のチェックボックスが選択されます。これは私が望まないものです。 2番目のコンテナ内の領域をクリックすると、チェックボックス領域を直接クリックする必要があります（ラベルまたはコンテナの残りの部分は、最初のチェックボックスのようにチェックボックスを選択せず​​コンテナになります）。したがって、2番目のチェックボックスを直接クリックすると、最初のチェックボックスもチェックされます。

私の質問は、なぜ私は最初のコンテナ内の任意の場所を確認できますが、2番目のコンテナは確認できませんか？さらに、2番目のものだけを選択したいときに最初に選択されているのはなぜですか？

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

次の2つのラベルを持っています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を" を参照し、一意ではありません。 2番目のlabelタグとinputタグが一意であることを確認してください。