jQuery检查复选框不能第二次使用

时间：2015-10-06 10:34:33

标签： javascript jquery html checkbox

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

例如，如果我点击Travel锚定旅行复选框需要进行检查，然后我点击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');
    }
});

6 个答案:

答案 0 :(得分：8)

而不是那样，你可以使用<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>

答案 1 :(得分：3)

问题是$(':checked').length如果检查了页面中的任何一个复选框，将返回真值

您可以使用像

这样的切换来简化逻辑 
$(".instagram-details a").click(function () {        
    $(this).toggleClass('active');
    $(this).find(':checkbox').prop('checked', $(this).hasClass('active'));
});

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

演示：Fiddle

答案 2 :(得分：3)

仅更改此内容：

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

有了这个

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

它有效

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

答案 3 :(得分：2)

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

您可以使用label。

Demo

＆＃13;
＆＃13; 
:checked + label {
  color: red;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果您无法更改HTML结构，则需要使用JS。

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

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

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

切换课程使用

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

Updated Fiddle

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

  ele.prop('checked', !ele.checked);
  $(this).toggleClass('active', ele.is(':checked'));
});
＆＃13; 
.active {
  color: red;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

检查一下！

$(".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');
    }
});

答案 5 :(得分：0)

使用以下

更改您的代码 
$(".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');
    }
});
相关问题
最新问题