jQuery check checkbox is not working with second time

Mr.Happy Published at Dev

Mr.Happy

I have html with anchors and checkboxs. Now When user select to anchor, I want to check checkbox to closest anchor.

For example, If I click to Travel anchor Travel checkbox need to be checked and then I click to Kids anchor Kids checkbox need to be checked and add/remove active class from anchor.

In my example it is working with only first anchor selection, when you select any other anchor it will not work and not select any checkbox.

Here is my 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>

and jQuery code:

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

Praveen Kumar Purushothaman

Instead of that, you can just use <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>

Collected from the Internet

Please contact [email protected] to delete if infringement.