https://jsfiddle.net/zcyykhow/

Only one checkbox should be allocated.

What did I do wrong?

 $(".lines").click(function() { if ($(this).find(".ch").is(":checked")) { $(".ch").removeAttr("checked"); } else { $(".ch").attr("checked", "checked"); } }); 
 .lines { width: 100%; padding: 10px 0 10px 0; background-color: #FFFFFF; overflow: hidden; font-weight: 500; font-size: 17px; } .lines:hover { background-color: #F5F5F5; cursor: pointer; } .tab1_unvisible { float: left; width: 10%; padding: 8px 0 8px 0; text-align: center; } .tab2 { float: left; width: 64%; padding: 8px 2% 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab3 { float: left; width: 9%; padding: 8px 0 8px 0; } .tab4 { float: left; width: 15%; padding: 8px 0 8px 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <div class="lines"> <div class="tab1_unvisible"> <input class="ch" type="checkbox"> </div> <div class="tab2">Tesla Model S (2015)</div> <div class="tab3">11</div> <div class="tab4">$120 000</div> </div> <div class="lines"> <div class="tab1_unvisible"> <input class="ch" type="checkbox"> </div> <div class="tab2">Tesla Model S (2015)</div> <div class="tab3">11</div> <div class="tab4">$120 000</div> </div>

  • all necessary code must be directly in question. Links can be a supplement - Grundy
  • @Grundy, corrected - emtecif
  • Though I don’t know very well JS, but of course nothing will work here as you want. You after all have designated one class, and JS, cannot determine which of the two should be ticked by the checkbox. In this case, JS is working correctly. - Insider

2 answers 2

For your task JS Not needed

  jQuery('.lines').on('click', function() { var checkbox = jQuery('.ch', jQuery(this)); checkbox.prop("checked", !checkbox.is(':checked')); jQuery(this).toggleClass('checked', checkbox.is(':checked')) }) 
 .lines { display: block; padding: 10px 0 10px 0; background-color: #FFFFFF; overflow: hidden; font-weight: 500; font-size: 17px; } .lines:hover{ background-color: #F5F5F5; cursor: pointer; } .tab1_unvisible{ float: left; width: 10%; padding: 8px 0 8px 0; text-align: center; } .tab2{ float: left; width: 64%; padding: 8px 2% 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab3{ float: left; width: 9%; padding: 8px 0 8px 0; } .tab4{ float: left; width: 15%; padding: 8px 0 8px 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="lines"> <div class="tab1_unvisible"><input class="ch" type="checkbox"></div> <div class="tab2">Tesla Model S (2015)</div> <div class="tab3">11</div> <div class="tab4">$120 000</div> </div> <div class="lines"> <div class="tab1_unvisible"><input class="ch" type="checkbox"></div> <div class="tab2">Tesla Model S (2015)</div> <div class="tab3">11</div> <div class="tab4">$120 000</div> </div> <div class="lines"> <div class="tab1_unvisible"><input class="ch" type="checkbox"></div> <div class="tab2">Tesla Model S (2015)</div> <div class="tab3">11</div> <div class="tab4">$120 000</div> </div>

  • the vehicle has 2 checkboxes that are selected at the same time. - Denis
  • Thank you very much, but I need it from js , since my checkboxes will be hidden, instead of them the picture will appear 16 * 16 green tick) - emtecif
  • one
    the script is working, but you need another class for the block with a check mark for example to change .... - Igor Kalinchuk

instead of remove try prop :

 $(".lines").click(function(){ if($(".ch").is(":checked")){ $(".ch").trigger("change").prop("checked", false); }else{ $(".ch").trigger("change").prop("checked", true); } });
  • that doesn't work - emtecif
  • one
    $(".ch") - still selects all elements with a class on the page, so it will still apply to both elements - Grundy
  • @Grundy thought there was only one input .. then like this: jsfiddle.net/dLg7cfgy - C.Raf.T