javascript - 如果有多个复选框，为什么只有一个复选框起作用

Question

我有一个应用程序，它的多个实例存在于同一页面中。我在使用 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 或 3 的按钮会在第一个实例中进行更改，即使您单击第二个实例也是如此实例。

我想让每个实例都正常工作，并且每个单选按钮只有在按下时才工作。

有什么想法吗？

Answer 1

正如@dryden-long 已经提到的，ID 必须是唯一的。修复那个，修改对应的for相应的属性，您的问题已解决。

编辑:根据您的评论，自 id你的值(value)观 div.panel元素已经是唯一的，您可以执行类似以下的操作，它会动态生成唯一的 id input 的值元素，并更新 for相应的值 label相应的元素:

$.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>