如果有多个复选框，为什么只有一个复选框实例有效?

Why does only one instance of checkbox work if there are multiple

本文关键字：复选框有一个实例有效如果为什么更新时间：2023-09-26

我有一个应用程序，它的多个实例存在于同一个页面中。我在应用程序中有一种幻灯片，它使用input来显示相应的数据。然而，label和input只适用于页面中的一个实例。因此，如果页面中有两个相同应用程序的实例，则只有第一个实例有效。

JSFiddle

$.fn.MP = function(options) {
  var settings = $.extend({
    // These are the defaults
    text: ""
  }, options);
  $(this).on("click tap", "input", function() {
    $(this).parent().siblings().find("input").prop("checked", false);
  });
};
$("#item1").MP({});
$("#item2").MP({});

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
.panelTop > div div {
  display: none;
}
.panelTop > div input[type="checkbox"]:checked ~ div {
  display: block;
}
.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}
.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}
.panel > .panelBottom {
  width: 100%;
  height: 50px;
}
.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}
.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input id="box-1" type="checkbox" checked>
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input id="box-2" type="checkbox">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input id="box-3" type="checkbox">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label for="box-1" class="btn1">1</label>
    <label for="box-2" class="btn2">2</label>
    <label for="box-3" class="btn3">3</label>
  </div>
</div>
<div class="panel" id="item2">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input id="box-1" type="checkbox">
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input id="box-2" type="checkbox">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input id="box-3" type="checkbox">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label for="box-1" class="btn1">1</label>
    <label for="box-2" class="btn2">2</label>
    <label for="box-3" class="btn3">3</label>
  </div>
</div>

因此，正如您在演示中看到的，有两个应用程序实例，即使单击第二个实例，单击1, 2 or 3的按钮也会在第一个实例中发生更改。

我想使每个实例正确工作，每个单选按钮只在按下时才工作。

任何想法?

@dryden-long已经提到，id必须是唯一的。解决这个问题，并相应地修改相应的for属性，你的问题就解决了。

编辑:根据您的评论，由于您的div.panel元素的id值已经是唯一的，您可以做以下事情，它为您的input元素动态生成唯一的id值，并相应地更新相应的label元素的for值:

$.fn.MP = function(options) {
  var settings = $.extend({
    // These are the defaults
    text: ""
  }, options);
  $(this).on("click tap", "input", function() {
    $(this).parent().siblings().find("input").prop("checked", false);
  });
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
    var $panel = $(el);
    var panelId = $panel.attr('id');
    var $panelBottom = $('div.panelBottom', $panel);
    $('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
        var $input = $(elInput);
        var inputId = panelId + '-box-' + indexInput;
        $input.attr('id', inputId);
        $('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
    });
});
$("#item1").MP({});
$("#item2").MP({});

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
.panelTop > div div {
  display: none;
}
.panelTop > div input[type="checkbox"]:checked ~ div {
  display: block;
}
.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}
.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}
.panel > .panelBottom {
  width: 100%;
  height: 50px;
}
.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}
.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="checkbox">
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>
<div class="panel" id="item2">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="checkbox">
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>