一个 div 的复选框输入影响另一个 div 的复选框输入

Question

我正在使用基本 HTML 创建两个不同的 div，每个 div 都有一些复选框作为选项。（基本上我正在创建一个测试模块）。我已经检查了第一个 div 的一些复选框。现在，当我转到第二个 div 并单击文本，即某些复选框的标签时，第一个 div 的相应复选框将被取消选中。这不应该发生。请帮帮我

对不起各位。没有发布代码。这是两个不同的div 第一个：

          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="csuite_2" id="opB" value="B">
            <label class="form-check-label" >
              Daily
            </label>
          </div>
          <br/>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="csuite_2" id="opC" value="C">
            <label class="form-check-label" >
              Once a month
            </label>
          </div>

第二个

          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="expectation_3" id="opB" value="B">
            <label class="form-check-label" >
              Fund Manager
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="expectation_3" id="opD" value="D">
            <label class="form-check-label" >
              Launching my own startup
            </label>
          </div>
          <br/> 

我尝试不将标签包装到复选框，它工作正常。但是有没有办法通过包装标签并阻止这件事发生来做到这一点？

Answer 1

我希望这是你的问题。

基本上是因为类似的id & for。

正如您在下面的代码中看到的那样，我在“div1”中使用了 Bike & Car 作为id，并且在“div2”中使用了相同的 id。因此，请确保提供一个唯一的 id 并对应于值。

<!DOCTYPE html>
<html>
<body>

<div class="div1">
	<label for="Bike">
    	<input id="Bike" type="checkbox"> I have a bike
    </label><br>
  	<label for="Car">
    	<input id="Car" type="checkbox"> I have a car
    </label><br>
<div>

<br><br><br>

<div class="div2">
	<label for="Bike">
    	<input id="Bike" type="checkbox"> I have a bike
    </label><br>
  	<label for="Car">
    	<input id="Car" type="checkbox"> I have a car
    </label><br>
<div>

</body>
</html>