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 & 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 & 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');
}
});
The problem is $(':checked').length
will return a truthy value if any one of the checkboxes in the page is checked
You can simplify the logic using toggling like
$(".instagram-details a").click(function () {
$(this).toggleClass('active');
$(this).find(':checkbox').prop('checked', $(this).hasClass('active'));
});
Here we first toggle the active class of the clicked anchor element, then we sets the checked state of the checkbox using whether the anchor element has the active class or not
Demo: Fiddle
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 & 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 & Design</label>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With