Question

html是动态的，一个例子是：

<ul class="list-group">
    <li class="list-group-item">
         <div class="checkbox">
             <label>
                 <input type="checkbox" value="693b32d9-d776-4df2-bf78-bd3412d9945b" name="permissions">
                 A / B
                 <span class="label label-info invisible">X</span>
             </label>
         </div>
     </li>
     <li class="list-group-item">
         <div class="checkbox">
             <label>
                 <input type="checkbox" checked="checked" value="b70a2218-6af1-4a5a-a6cf-1454df039d24" name="permissions">
                 A / B / C
                 <span class="label label-info invisible">X</span>
             </label>
         </div>
     </li>
     <li class="list-group-item">
         <div class="checkbox">
             <label>
                 <input type="checkbox" value="db5ffc0f-6733-4d65-a5f0-aafd6411cd8e" name="permissions">
                 A / B / C / D
                 <span class="label label-info">Y</span>
                 <span class="label label-info invisible">X</span>
             </label>
         </div>
     </li>
     <li class="list-group-item">
         <div class="checkbox">
             <label>
                  <input type="checkbox" value="b08f35be-9e21-4f37-9997-b9dce3b91356" name="permissions">
                  A / B / E
                  <span class="label label-info">Y</span>
                  <span class="label label-info invisible">X</span>
             </label>
         </div>
     </li>
 </ul>

如果检查了一个项目（例如第三个项目，文本为“A / B / C / D”），则文本为“A”，“A / B”或“A / B / C”的项目“，其”X“标记将自动显示;
如果一个项目标有“Y”（例如第四个，带有文本“A / B / E”），那么带有文本“A”或“A / B”的项目，其“X”标记也会自动显示;
所有其他“X”标记都会隐藏。

Answer 1

您可以使用data属性。

     <div class="checkbox">
         <label data-a data-b>
             <input type="checkbox" value="693b32d9-d776-4df2-bf78-bd3412d9945b" name="permissions" >
             A / B
             <span class="label label-info invisible">X</span>
         </label>
     </div>

因此，当带有“a”字样的项目发生变化时，数据“a”的所有时间也会发生变化。

$('[data-a] input').on('change', function() {
    $('ul').find('[data-a] span.label').removeClass('invisible');
}

选中带有“相似”标签的复选框

1 个答案: