如何修复未点击复选框却自动选中的HTML表单问题

我最近在freeCodeCamp学习Web开发，完成了第一个「响应式网页设计」认证项目（Survey Form）。代码测试已通过，但遇到一个HTML bug：点击任意复选框附近或其对应名称时，都会选中「Action」复选框，该如何修复？

我尝试修改name和value属性，但问题未解决；查阅这些属性的资料，描述却很模糊。我曾将所有input移出label标签，这解决了问题，但觉得这样input与label就不再关联了，所以又把input放回了label内。

我的代码如下：

<form id="survey-form">
  <fieldset>
    <label id="name-label">Name: <input id="name" type="text" placeholder="Enter your name..." required></label>
    <label id="email-label">Email: <input id="email" type="email" placeholder="Enter your email..." required></label>
    <label id="number-label">Age: <input id="number" type="number" min="0.1" max="120" placeholder="Enter your age..." required></label>
    <label id="phone-label">Phone Number: <input type="tel" id="phone" name="phone"
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"   placeholder="Enter your phone number..."  required></label>
    <label></label>
    <label for="dropdown">What is the best Anime?
              <select id="dropdown">
                <option value="">(select one)</option>
                <option value="1">Attack on Titan</option>
                <option value="2">Bleach</option>
                <option value="3">Code Geass</option>
                <option value="4">Cowboy Bebop</option>
                <option value="5">Death Note</option>
                <option value="6">Demon Slayer</option>
                <option value="7">Fullmetal Alchemist: Brotherhood</option>
                <option value="8">Hunter x Hunter</option>
                <option value="9">Mob Psycho</option>
                <option value="10">Naruto </option>
                <option value="11">One Piece</option>
                <option value="12">One Punch Man</option>
                <option value="13">Oshi no Ko</option>
                <option value="14">Steins;Gate</option>
                <option value="15">Tokyo Ghoul</option>
                <option value="16">Vinland Saga</option>   
                <option value="17">Other(Options)</option>
                </select>
            </label>
  </fieldset>
  <fieldset>
    <label>Is the Anime family-friendly? 
             <input type="radio" name="family-friendly" value="yes">Yes
             <input type="radio" name="family-friendly" value="no">No
             </label>
    <label> What genre is this Anime? <input type="checkbox" name="genre" value="action-genre">Action <input type="checkbox" name="chk_group" value="adventure-genre">Adventure <input type="checkbox" name="chk_group" value="comedy-genre">Comedy <input type="checkbox" name="chk_group" value="drama-genre">Drama <input type="checkbox" name="chk_group" value="fantasy-genre">Fantasy <input type="checkbox" name="chk_group" value="horror-genre">Horror <input type="checkbox" name="chk_group" value="magic-genre">Magic <input type="checkbox" name="chk_group" value="mystery-genre">Mystery <input type="checkbox" name="chk_group" value="psychological-genre">Psychological <input type="checkbox" name="chk_group" value="romance-genre">Romance <input type="checkbox" name="chk_group" value="sci-fi-genre">Sci-Fi <input type="checkbox" name="chk_group" value="slice-of-;life-genre">Slice of Life <input type="checkbox" name="chk_group" value="supernatural-genre">Supernatural</label>
  </fieldset>
  <fieldset>
    <label for="anime-description">Describe why this Anime is the best:
              <textarea id="anime-description" name="the-anime-description" rows="3" cols="30" placeholder="I love..."></textarea>
            </label>
    <input type="submit" id="submit" value="Submit" />
  </fieldset>

</form>

问题根源 #

你把所有复选框都放在了同一个<label>标签里，而HTML规则明确：一个<label>只能关联一个表单控件。当多个控件嵌套在同一个label中时，点击label内的任何区域，都会触发第一个被关联的控件——也就是这里的「Action」复选框，这就是bug的核心原因。

另外，你给「Action」复选框的name是genre，其他复选框是chk_group，这也不符合多选框规范：同一组多选框的name属性必须一致，这样表单提交时才能收集到所有选中的选项值。

修复方案 #

给每个复选框单独分配一个<label>，同时统一所有复选框的name属性，有两种关联方式可选：

方式1：隐式关联（将复选框放在label内部）

<fieldset>
  <p>What genre is this Anime?</p>
  <label><input type="checkbox" name="genre" value="action-genre">Action</label>
  <label><input type="checkbox" name="genre" value="adventure-genre">Adventure</label>
  <label><input type="checkbox" name="genre" value="comedy-genre">Comedy</label>
  <label><input type="checkbox" name="genre" value="drama-genre">Drama</label>
  <label><input type="checkbox" name="genre" value="fantasy-genre">Fantasy</label>
  <label><input type="checkbox" name="genre" value="horror-genre">Horror</label>
  <label><input type="checkbox" name="genre" value="magic-genre">Magic</label>
  <label><input type="checkbox" name="genre" value="mystery-genre">Mystery</label>
  <label><input type="checkbox" name="genre" value="psychological-genre">Psychological</label>
  <label><input type="checkbox" name="genre" value="romance-genre">Romance</label>
  <label><input type="checkbox" name="genre" value="sci-fi-genre">Sci-Fi</label>
  <label><input type="checkbox" name="genre" value="slice-of-life-genre">Slice of Life</label>
  <label><input type="checkbox" name="genre" value="supernatural-genre">Supernatural</label>
</fieldset>

方式2：显式关联（用for和id绑定）

<fieldset>
  <p>What genre is this Anime?</p>
  <input type="checkbox" id="action-genre" name="genre" value="action-genre">
  <label for="action-genre">Action</label>
  
  <input type="checkbox" id="adventure-genre" name="genre" value="adventure-genre">
  <label for="adventure-genre">Adventure</label>
  
  <input type="checkbox" id="comedy-genre" name="genre" value="comedy-genre">
  <label for="comedy-genre">Comedy</label>
  
  <!-- 其他复选框以此类推 -->
</fieldset>

这两种方式都能保证点击文字时只会选中对应的复选框，同时保持input和label的关联，也符合表单规范。

内容的提问来源于stack exchange，提问作者Soto