All geek questions in one place

The jQuery check checkbox does not work a second time

I have html with bindings and checkboxes. Now that the user selects a snap, I want to check the box for the nearest anchor.

For example, if I click on the Travel binding checkbox, you need to check the box, and then click the Kids button to bind the binding for children, and also add / remove the active class from the binding.

In my example, it only works with the first anchor selection, when you select any other anchor, it will not work and will 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'); } });
+5
source share
6 answers

Instead, you can simply 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>
+8
source

Only change this:

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

With the help of this

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

And he works

script: http://jsfiddle.net/zaarwejy/2

+3
source

Problem $(':checked').length will return a true value if any of the checkboxes on the page is $(':checked').length

You can simplify the logic by using toggling as

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

Here we first switch the active class of the anchor binding element, then set the checked state of the checkbox whether the anchor element is using the active class or not

Demo: Fiddle

+2
source

There is no need to use JS if you can restructure the HTML. You can use the sibling selector and the :checked property of this flag to change the styles of the corresponding label.

You can use 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>

If you cannot change the structure of HTML, you need to use JS.

Your $(':checked').length selector checks if at least one checkbox is selected. So, when one flag is set for the next flag, the code does not work.

To switch the state of the flag

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

To switch class usage

 $(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>
+2
source

Check this!

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

Change the code as follows

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

Source: https://habr.com/ru/post/1233039/

More articles:


All Articles