我有很多复选框，它们会向PHP返回一组数据。它们都被命名为'Plans[]'，但ID不同。
我有一个CSS复选框样式器，用更花哨的东西取代了通常的HTML复选框...
当页面显示时，有一个（或几个）是“选中”的，但它们没有显示为选中（我认为有一个是选中的，但通常是隐藏的）。
我假设这个问题是由于它们都有相同的名称而引起的，因此，由于这个原因，它们的checked属性没有得到处理。我试着用它们自己的形式 Package 它们中的每一个（正如我在其他地方看到的那样），但没有用。
下面是一个示例：

<style type="text/css">
.checkOpt input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: -.3em;
  right: 5%;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 20%;
  border: 1px;
  border-color: #1e62d0;
  border-style: dashed;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  font-weight: 900;
  color: blue;
  margin-top: -11px;
  margin-left: -3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  content: "\2714";
  position: absolute;
  display: none;
}

/* Style the indicator (dot/circle) */
.checkOpt .checkmark:after {
    top: 8px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    
    /* background: white; */
    text-shadow: -1px -1px 0 #7f7f7f, 1px -1px 0 #7f7f7f, -1px 1px 0 #7f7f7f, 1px 1px 0 #7f7f7f;
}

/* Show the indicator (dot/circle) when checked */

.checkOpt input:checked~.checkmark:after {
  display: block;
}

/* On mouse-over, add a grey background color */
.checkOpt:hover input ~ .checkmark {
  background-color: #97c4fe;
}
/* When the radio button is checked, add a blue background */
.checkOpt input:checked ~ .checkmark {
  background-color: #2196F3;
}
.checkOpt input:disabled ~ .checkmark {
  background-color:#b0c7df; pointer:default;
}

.test {
  position: relative;
  height:60px;
}
</style>

<div class="test">
  <div class="checkOpt" style="top:20px;">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line - OFNL" id="12" value="0.00" checked="checked" >              
                  <span class="checkmark"></span>
          </label>
  </div>
</div>
<div  class="test">
  <div class="checkOpt" >
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Paper Bill" id="35" value="2.00" >              
                  <span class="checkmark"></span>
           </label>
  
  </div>
</div>
<div  class="test">
  <div class="checkOpt">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line " id="12" value="0.00" checked="checked" disabled="disabled">              
                  <span class="checkmark"></span>
          </label>
  
  </div>
</div>

......只有其中一个（第一个）显示为选中状态-其余的都没有。有人知道我可以做些什么来解决这个问题吗（如果可能的话，不对后续的数据收集进行编码更改！）
尝试了我能想到的一切，并欢迎任何建议。
UPDATE -我尝试更新页面，使复选框具有不同的名称（'Plans [0]'，'Plans[1]'等），复选标记突然开始出现在正确的位置。
现在的问题是有一些（遗留的）JQuery代码无法工作，即

$("input[name='plans[]']:checked").each(function(){
        var thisPlan= $(this).attr('id');  var thisVal = $(this).attr('value'); 
        plans.push(thisPlan); 
        planValues.push(thisVal);
// ....
// ....
}

我想如果Plans列表只是被发布并被PHP拾取的话，这是可行的，但实际上它被Javascript截取，处理并通过 AJAX 重新发布到下一个（PHP）页面（在那里它被$_POST ['plans']拾取得相当简单）。这是一个真实的的混乱，但我继承了它...
有人知道我如何在不破坏所有遗留（Javascript/JQuery）代码的情况下解决这个问题吗？