jQuery 检查复选框第二次无法使用

Question

我有带有锚点和复选框的 html。现在当用户选择锚点时，我想选中最近锚点的复选框。

例如，如果我点击Travelanchor Travel 复选框需要选中，然后我点击Kidsanchor 需要选中 Kids 复选框并从锚点添加/删除 active 类。

在我的示例中，它仅使用第一个锚点选择，当您选择任何其他锚点时，它将不起作用并且不选择任何复选框。

这是我的 JSFiddle：http://jsfiddle.net/zaarwejy/1/

<div class="row instagram-details">
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Sports</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Health &amp; Fitness</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Photography</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Food</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Travel</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class="active"><input type="checkbox" id="" class="industrie_branch_option" value="">Youth</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Technology</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Pets</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Kids</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);"><input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</a> 
    </div>
    <div class="col-md-2"> <a href="javascript:void(0);" class=""><input type="checkbox" id="" class="industrie_branch_option" value="">Art &amp; Design</a> 
    </div>
</div>

和 jQuery 代码：

$(".instagram-details a").click(function () {
    var ele = $(this).closest('a').find(':checkbox');
    if ($(':checked').length) {
        ele.prop('checked', false);
        $(this).removeClass('active');
    } else {
        ele.prop('checked', true);
        $(this).addClass('active');
    }
});

Answer 1

问题是$(':checked').length 会在页面中的任何一个复选框被选中时返回一个真值

您可以使用类似的切换来简化逻辑

$(".instagram-details a").click(function () {        
    $(this).toggleClass('active');
    $(this).find(':checkbox').prop('checked', $(this).hasClass('active'));
});

这里我们首先切换被点击的锚元素的活动类，然后我们使用锚元素是否具有活动类来设置复选框的选中状态

演示：Fiddle

Answer 2

除此之外，您可以使用<label>：

$(function() {
  $("input:checkbox").click(function() {
    if (this.checked)
      $(this).closest("label").addClass("active");
    else
      $(this).closest("label").removeClass("active");
  });
});

label.active {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row instagram-details">
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Sports</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Health &amp; Fitness</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Photography</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Food</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Travel</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</label>
  </div>
  <div class="col-md-2">
    <label class="active">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Youth</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Technology</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Pets</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Kids</label>
  </div>
  <div class="col-md-2">
    <label>
      <input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</label>
  </div>
  <div class="col-md-2">
    <label class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Art &amp; Design</label>
  </div>
</div>

Answer 3

只改变这个：

 if ($(':checked').length) {

有了这个

 if (ele.prop("checked")) {

它有效

小提琴：http://jsfiddle.net/zaarwejy/2

Answer 4

如果可以重构 HTML，则无需使用 JS。您可以使用复选框的兄弟选择器和:checked属性来更改相应标签的样式。

您可以使用label。

Demo

:checked + label {
  color: red;
}

<div class="row instagram-details">
  <div class="col-md-2">
    <input type="checkbox" id="1" class="industrie_branch_option" value="">
    <label for="1">Sports</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="2" class="industrie_branch_option" value="">
    <label for="2">Health &amp; Fitness</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="3" class="industrie_branch_option" value="">
    <label for="3">Photography</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="4" class="industrie_branch_option" value="">
    <label for="4">Entertainment</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="5" class="industrie_branch_option" value="">
    <label for="5">Food</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="6" class="industrie_branch_option" value="">
    <label for="6">Travel</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="7" class="industrie_branch_option" value="">
    <label for="7">Lifestyle</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="8" class="industrie_branch_option" value="">
    <label for="8">Automotive</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="9" class="industrie_branch_option" value="">
    <label for="9">Fashion</label>
  </div>
  <div class="col-md-2">
    <input type="checkbox" id="10" class="industrie_branch_option" value="">
    <label for="10">Beauty</label>
  </div>
</div>

---

如果不能改变 HTML 结构，则需要使用 JS。

您的选择器$(':checked').length 检查是否至少有一个选中的复选框。因此，当为下一个复选框选中一个复选框时，代码不起作用。

要切换复选框状态，请使用

ele.prop('checked', !ele.checked);

切换类使用

$(this).toggleClass('active', ele.is(':checked'));

Updated Fiddle

$(".instagram-details a").click(function() {
  var ele = $(this).closest('a').find(':checkbox');

  ele.prop('checked', !ele.checked);
  $(this).toggleClass('active', ele.is(':checked'));
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row instagram-details">
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Sports</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Health &amp; Fitness</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Photography</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Food</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Travel</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Youth</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Technology</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Pets</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Kids</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</a>
  </div>
  <div class="col-md-2">
    <a href="javascript:void(0);" class="">
      <input type="checkbox" id="" class="industrie_branch_option" value="">Art &amp; Design</a>
  </div>
</div>

Answer 5

检查一下！

$(".instagram-details a").click(function () {
    var ele = $(this).closest('a').find(':checkbox');
    if ($(ele).prop('checked')) {
        ele.prop('checked', false);
        $(this).removeClass('active');
    } else {
        ele.prop('checked', true);
        $(this).addClass('active');
    }
});

Answer 6

使用以下代码更改您的代码

$(".instagram-details a").click(function () {
    var ele = $(this).closest('a').find(':checkbox');

    if (ele.prop('checked')) {
        ele.prop('checked', false);
        $(this).removeClass('active');
    } else {
        ele.prop('checked', true);
        $(this).addClass('active');
    }
});