将活动类添加到复选框的匹配标签

Posted

技术标签:

【中文标题】将活动类添加到复选框的匹配标签【英文标题】：Add active class to matching label of a checkbox 【发布时间】：2019-10-04 08:26:39 【问题描述】：

我正在尝试在父 ul 之外的复选框输入的匹配标签上添加一个活动类。

我设置了一些标签，它们充当按钮，其 for="" 值与复选框的 ID 匹配，因此当它们被单击时，它们会检查匹配的输入，这很好，但我想要要做的是有一个脚本，当复选框被选中或有一个活动类时，它可以在.labelBtns部分中将一个活动类添加到它的匹配标签中。

到目前为止，我已经编写了一些 jQuery，控制台记录了复选框的 id 和匹配标签的 for，但我正在努力将逻辑连接在一起以实现我想要的，所以任何帮助都是太棒了。

$('.m-label-inline').filter('.selected').each(function(i) 
  var idValue = $(this).find('input').attr('id');
  console.log(idValue);
  $('.sizeLabel').each(function() 
    var idValue2 = $(this).attr('for');
    console.log(idValue2);
  );
);
html 
  box-sizing: border-box;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;


*,
*:before,
*:after 
  box-sizing: inherit;


body 
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  margin: 0 auto;
  max-width: 50rem;


ul 
  list-style: none;
  margin: 0;
  padding: 0;


.m-refinement 
  display: flex;
  flex-wrap: wrap;


.m-label-inline 
  background: #f8f8f8;
  border: 0.1rem solid #ddd;
  flex-basis: calc(50% - 1rem);
  margin-right: 2rem;
  margin-top: 2rem;
  max-width: calc(50% - 1rem);
  padding: 1rem;


.m-label-inline:nth-child(even) 
  margin-right: 0;


.labelBtns 
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -12em;
  margin-left: -2rem;
  margin-top: 2rem;


.sizeLabel 
  color: #111;
  cursor: pointer;
  flex-basis: 50%;
  max-width: 50%;
  padding-bottom: 2rem;
  padding-left: 2rem;
  user-select: none;


.labelText 
  background: white;
  border: 0.2rem solid #222;
  color: #111;
  display: inline-block;
  padding: 1rem 0.6rem;
  text-align: center;
  width: 100%;


.selected 
  background: tomato !important;


.selectedLabel .labelText 
  background: tomato;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
  <li class="selected swatch-xs m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS" title="Refine by Size: XS">
    <label for="XS">XS</label>
  </li>
  <li class=" swatch-s m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S" title="Currently Refined by Size: S">
    <label for="S">S</label>
  </li>
  <li class="swatch-m m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M" title="Currently Refined by Size: M">
    <label for="M">M</label>
  </li>
  <li class="swatch-l m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="L" name="L" data-value="L" title="Currently Refined by Size: L">
    <label for="L">L</label>
  </li>
  <li class="swatch-xl m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XL" name="XL" data-name="size" data-value="XL" title="Refine by Size: XL">
    <label for="XL">XL</label>
  </li>
  <li class="swatch-2xl m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="2XL" name="2XL" data-name="size" data-value="2XL" title="Refine by Size: 2XL">
    <label for="2XL">2XL</label>
  </li>
</ul>
<section class="labelBtns">
  <label class="sizeLabel" for="XS">
    <span class="labelText">Size: XS</span>
  </label>
  <label class="sizeLabel" for="S">
    <span class="labelText">Size: S</span>
  </label>
  <label class="sizeLabel" for="M">
    <span class="labelText">Size: M</span>
  </label>
  <label class="sizeLabel" for="L">
    <span class="labelText">Size: L</span>
  </label>
  <label class="sizeLabel" for="XL">
    <span class="labelText">Size: XL</span>
  </label>
  <label class="sizeLabel" for="2XL">
    <span class="labelText ">Size: 2XL</span>
  </label>
</section>

【问题讨论】：

【参考方案1】：

要实现这一点，您只需要挂钩复选框的change 事件，然后根据是否选中该框在closest() li 上设置类。您也可以使用复选框的id 通过其for 属性找到相关的label：

试试这个：

$(':checkbox').on('change', function() 
  $(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
).trigger('change');

请注意，trigger('change') 使逻辑在页面加载时运行以自动分配类，而无需您手动将其放入 HTML。

$(':checkbox').on('change', function() 
  $(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
).trigger('change');
html 
  box-sizing: border-box;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;


*,
*:before,
*:after 
  box-sizing: inherit;


body 
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  margin: 0 auto;
  max-width: 50rem;


ul 
  list-style: none;
  margin: 0;
  padding: 0;


.m-refinement 
  display: flex;
  flex-wrap: wrap;


.m-label-inline 
  background: #f8f8f8;
  border: 0.1rem solid #ddd;
  flex-basis: calc(50% - 1rem);
  margin-right: 2rem;
  margin-top: 2rem;
  max-width: calc(50% - 1rem);
  padding: 1rem;


.m-label-inline:nth-child(even) 
  margin-right: 0;


.labelBtns 
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -12em;
  margin-left: -2rem;
  margin-top: 2rem;


.sizeLabel 
  color: #111;
  cursor: pointer;
  flex-basis: 50%;
  max-width: 50%;
  padding-bottom: 2rem;
  padding-left: 2rem;
  user-select: none;


.labelText 
  background: white;
  border: 0.2rem solid #222;
  color: #111;
  display: inline-block;
  padding: 1rem 0.6rem;
  text-align: center;
  width: 100%;


.selected 
  background: tomato !important;


.selectedLabel .labelText 
  background: tomato;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
  <li class="swatch-xs m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS">
    <label for="XS">XS</label>
  </li>
  <li class=" swatch-s m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S">
    <label for="S">S</label>
  </li>
  <li class="swatch-m m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M">
    <label for="M">M</label>
  </li>
</ul>
<section class="labelBtns">
  <label class="sizeLabel" for="XS">
    <span class="labelText">Size: XS</span>
  </label>
  <label class="sizeLabel" for="S">
    <span class="labelText">Size: S</span>
  </label>
  <label class="sizeLabel" for="M">
    <span class="labelText">Size: M</span>
  </label>
</section>

【讨论】：

嗨，这不是我想要的，也许我没有完全解释清楚。当复选框输入被选中或上面有一个选定的类时，我希望 .labelBtns 部分中的匹配标签也有某种活动类，所以如果选中了 id 为“XS”的复选框，我想要一个类'for="XS"' 的匹配标签，如果你得到我，所以我可以向该按钮添加某种样式以显示它当前已被选中和选择。 TBH Rory 这可能是我的解释，因为很难用语言表达，谢谢，我会去试试看 :)

以上是关于将活动类添加到复选框的匹配标签的主要内容，如果未能解决你的问题，请参考以下文章

使用 JS 或 Jquery 将复选框和单选的值添加到标签

Symfony buildForm：将复选框输入放在标签标签内

Backbone.js 将两个不同的模型添加到同一个集合中

如何从弹出窗口向 boxlayout 添加新标签？

使用 cakephp 将复选框保存到单独的表中

当我添加一个复选框标签的类时，CSS停止工作[重复]