CODEWITHSUNDEEP
javascripthtmljquery
Dataman
Dataman

Reputation: 21

How to check if the first checkbox in a row of a HTML table is checked

I am stuck. How do I check to see if the first checkbox in each row of a table is checked? I want to run a javascript condition based upon whether the checkbox is checked. This condition will be added to the condition that I have that checks if all checkboxes have been checked. Also, how do I check the value of second checkbox for each row? I will run a separate javascript condition on that as well.

Here is what I have so far.

<script>



function run() {
  document.querySelectorAll('.theTable tr').forEach((row, i) => {
    let allChecked = row.querySelectorAll('input[type=checkbox]').length === row.querySelectorAll('input[type=checkbox]:checked').length

    if (allChecked && row.querySelectorAll('select option:checked').length > 0 && row.querySelector('select option:checked').value !== '') {
      console.log('run conditional on row index ', i)
    }
    
  })
}
</script>

<input type="submit" onclick="run()" />

<table class='theTable'>
  <tr>
    <form>
      <td>
        <label> <input type="checkbox" class="checks" value="Apple" checked>Apple </label>
        <label> <input type="checkbox" class="checks" value="BananaValue" checked>Banana </label>
        <label> <input type="checkbox" class="checks" value="Carrot" checked>Carrot </label>
      </td>
      <td>

        Select your favorite fruit:
        <select id="mySelect">
          <option value=""></option>
          <option value="apple">apple</option>
          <option value="orange">Orange</option>
          <option selected value="pineapple">Pineapple</option>
          <option value="banana">Banana</option>
        </select>
      </td>
    </form>
  </tr>

  <tr>
    <form>
      <td>
        <label> <input type="checkbox" class="checks" value="Apple">Apple </label>
        <label> <input type="checkbox" class="checks" value="BananaValue">Banana </label>
        <label> <input type="checkbox" class="checks" value="Carrot">Carrot </label>
      </td>
      <td>

        Select your favorite fruit:
        <select id="mySelect">
          <option value=""></option>
          <option value="apple">apple</option>
          <option value="orange">Orange</option>
          <option value="pineapple">Pineapple</option>
          <option value="banana">Banana</option>
        </select>
      </td>

    </form>
  </tr>


</table>

Upvotes: 0

Views: 3045

Answers (1)

Kinglish
Kinglish

Reputation: 23664

You can simply use row.querySelector('input[type=checkbox]').checked which will look at the first matching selector (a checkbox input) and test if it's checked.

Also I noticed you tagged this as jQuery. I updated the answer to have the same function in JQ. Here's the same code as above:

$(this).find('input[type=checkbox]:first').prop('checked')


function run() {
  document.querySelectorAll('.theTable tr').forEach((row, i) => {
    if (row.querySelector('input[type=checkbox]').checked) {
      console.log(`the first checkbox of row ${i} is checked`);
    }
  })
}

// jQuery Version
/*

function run() {
      $('.theTable tr').each(function(i) {
        if ($(this).find('input[type=checkbox]:first').prop('checked')) {
          console.log(`the first checkbox of row ${i} is checked`);
        }
      })
    }
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" onclick="run()" />

<table class='theTable'>
  <tr>
    <form>
      <td>
        <label> <input type="checkbox" class="checks" value="Apple" checked>Apple </label>
        <label> <input type="checkbox" class="checks" value="BananaValue" checked>Banana </label>
        <label> <input type="checkbox" class="checks" value="Carrot" checked>Carrot </label>
      </td>
      <td>

        Select your favorite fruit:
        <select id="mySelect">
          <option value=""></option>
          <option value="apple">apple</option>
          <option value="orange">Orange</option>
          <option selected value="pineapple">Pineapple</option>
          <option value="banana">Banana</option>
        </select>
      </td>
    </form>
  </tr>

  <tr>
    <form>
      <td>
        <label> <input type="checkbox" class="checks" value="Apple">Apple </label>
        <label> <input type="checkbox" class="checks" value="BananaValue">Banana </label>
        <label> <input type="checkbox" class="checks" value="Carrot">Carrot </label>
      </td>
      <td>

        Select your favorite fruit:
        <select id="mySelect">
          <option value=""></option>
          <option value="apple">apple</option>
          <option value="orange">Orange</option>
          <option value="pineapple">Pineapple</option>
          <option value="banana">Banana</option>
        </select>
      </td>

    </form>
  </tr>


</table>

Upvotes: 2

Related Questions