How to use JQuery find and each together?

Question

I am printing row column table. In each of my column items have 2 checkbox,

<?php
for($b=0; $b<$RoomSize["COL"]; $b++){
?>
    <div class="col">
    <?php
        $ColKeyExist = checkIfKeyExist($GetSeatLayout, $b, 2);
        if($RowKeyExist){
            if($ColKeyExist){
                if($GetSeatLayout[$a]["ROWID"]==$a && $GetSeatLayout[$a]["COLUMNID"]==$b){
    ?>
                  <div id=<?=$a.",".$b?>>
                    <div class="form-check pl-0">
                      <input class="form-check-input" type="checkbox" name="SEATNO" value=<?=$a.",".$b?>>
                      <label class="fas fa-chair SEATIMAGE"></label>
                      <input class="form-check-input" type="checkbox" name="SEATSTATUS" value=0 >
                    </div>
                  </div>
    </div>
    <?php
                }
            }
        }
    ?>

This is my JQUERY code. I try following the documentation but failed to achieve output

$(".col").click(function (e) { 
    $(this).find('input[type="checkbox"]').each(function (a) {
    $(this).prop('checked', "checked");

    });    
});

When on click on the particular ".col" i want it to find all checkbox under it and check them,

@CertainPerformance I removed it, but it still wont read the child elements and find the checkboxes — KIRPAL SINGH, Jan 08 '19 at 05:17
Not sure about passing `'checked'`, maybe try passing a boolean instead, `true` — CertainPerformance, Jan 08 '19 at 05:20
@CertainPerformance It still doesnt work. I think I set the property "checked: checked" was correct — KIRPAL SINGH, Jan 08 '19 at 05:23
Your code seems to be 'valid' so I would suggest to check if the click event is being fired by adding a `console.log()` right after `.click(function(e) {` — lthh89vt, Jan 08 '19 at 05:26
@CertainPerformance is right - should be boolean - you should do console.log( this) just before that, make sure you are on right element but it's bad code anyway, probaly does work, but the checkbox unchecks itself because it process the click — David Bray, Jan 08 '19 at 05:29
@CertainPerformance I managed to fix it by moving my jquery code into $(document).ready function. My code is not bad. Just that i removed most of the code to make it shorter so i can focus on my issue — KIRPAL SINGH, Jan 08 '19 at 06:12
@CertainPerformance Why cant my code run outside of document ready? I mean I am only able to click on elements once the elements are present. I believe it shouldn't be an issue isnt it? Or is it all jquery code MUST be inserted into document ready function? — KIRPAL SINGH, Jan 08 '19 at 06:13

score 1 · Answer 1 · answered Jan 08 '19 at 05:43

1

Try this

$('.col input[type=checkbox]').each(function (){
  //use one of the below
  $(this).prop('checked', true); 
  $(this).attr('checked', true); // if your jQuery 1.5.x and below
});

answered Jan 08 '19 at 05:43

Habib Ur Rehman

188
10

This answer will not provide solution what he/she expecting at all. If multiple .col item there then your code will check all of them but he/she want only which .ol he clicked inside checkbox checked. Please see the .col is repeating item. – Hanif Jan 08 '19 at 05:48
@Hanif Yes, you are right. I am using loop and repeating the same class/tag/elements but only with different values. – KIRPAL SINGH Jan 08 '19 at 06:17

Hanif · Answer 2 · 2019-01-08T05:57:44.350

You need some modification over there, see below snippet:

$(document).ready(function(){
 $(".col").click(function (e) {
 let col = $(this); // This line ensure you get outer scope where you clicking.
 col.find('input[type="checkbox"]').each(function (a) {
  col.find('input[type="checkbox"]').eq(a).prop('checked', "checked");
 });    
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
      <div id="col-1">
        <div class="form-check pl-0">
          <input class="form-check-input" type="checkbox" name="SEATNO">
          <label class="fas fa-chair SEATIMAGE"></label>
          <input class="form-check-input" type="checkbox" name="SEATSTATUS" value="0">
        </div>
      </div>
    </div>
    <div class="col">
      <div id="col-2">
        <div class="form-check pl-0">
          <input class="form-check-input" type="checkbox" name="SEATNO" value="0">
          <label class="fas fa-chair SEATIMAGE"></label>
          <input class="form-check-input" type="checkbox" name="SEATSTATUS" value="0">
        </div>
      </div>
    </div>

Or if you don't want iterate the checkbox and just checked them all inside .col then just you don't need trigger .each function you can simply write your code following way:

$(".col").click(function (e) {
    $(this).find('input[type="checkbox"]').prop('checked', "checked");
});

score 1 · Answer 3 · answered Jan 08 '19 at 06:15

$(document).ready(function () {
    $(".col").click(function (e) { 
        console.log("success");

        $(this).find('input[type="checkbox"]').each(function (a) {
            var isChecked = $(this).prop('checked');
            if(isChecked == true){
                $(this).prop('checked', false);
            }else if(isChecked == false){
                $(this).prop('checked', true);
            }

        });    
    });
});

How to use JQuery find and each together?

3 Answers3