Question

我有一堆具有相同结构的复选框，但它们是跨距，而不是选择，因此它们的检查方式是添加一个类。

<div class="mod_6">
   <div class="checkbox-wrapper">
        <span class="checkbox" id="AllColors"></span>
        <span>All</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox checked"></span>
          <span>Blue</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox"></span>
         <span>Black</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox"></span>
         <span>Red</span>
   </div>
</div>

这是我的JS：

function CheckBox() {
    $(".checkbox").click(function () {
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
        } else {
            $(this).addClass('checked');
        }
    });
};

我想要的是，如果我点击一个特定的复选框，在这种情况下，是一个说“全部”的复选框。（我假设我应该给它一个id），我希望修改所有带有复选框的项目，并添加课程＆＃39; checked＆＃39;。我不知道如何找到它们，因为它们处于不同的div中。

我尝试过失败的方法是使用find（）然后使用addClass（）：

 $("#allColors").click(function () {
    $.each('.checkbox-wrapper').find('.checkbox').addClass('checked');
})

谢谢：）

Answer 1

如果我没记错的话，你可以这样做：

(?:^[^@]+@[^:]+:\s)([^;]+)

Answer 2

我认为你正在寻找toggleClass()：

$("#AllColors").click(function (){
  $(".checkbox").toggleClass('checked');
});

.checked{
    border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
   <div class="checkbox-wrapper">
        <span class="checkbox" id="AllColors">All</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox checked"></span>
          <span>Blue</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox"></span>
         <span>Black</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox"></span>
         <span>Red</span>
   </div>
</div>

或addClass()：

$("#AllColors").click(function (){
  $(".checkbox").addClass('checked');
});

.checked{
    border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
   <div class="checkbox-wrapper">
        <span class="checkbox" id="AllColors">All</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox checked"></span>
          <span>Blue</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox"></span>
         <span>Black</span>
   </div>
   <div class="checkbox-wrapper">
         <span class="checkbox"></span>
         <span>Red</span>
   </div>
</div>

Answer 3

这里有一些问题：

您使用#allColors代替#AllColors
您以错误的方式使用each
更好地使用on()代替click()

改为使用：

$("#AllColors").on('click', function(){
    $('.checkbox-wrapper').each(function(){
        $(this).find('.checkbox').addClass('checked')
    })
})

使用JQuery将类更改为具有相同类的所有项

3 个答案: