Question

我正在使用基本HTML创建两个不同的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>

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

1 个答案: