Home > Blockchain >  How to Click Checkbox if row contains certain tag
How to Click Checkbox if row contains certain tag

Time:02-18

I want to click the checkbox if the row contains a <mark> element. How can I do this in JS/jQuery?

enter image description here

<table >
  <thead>
    <tr>
      <th >
        <div >
          <label >
            <input  type="checkbox" value="1" style="display: inline-block;">
          </label>
        </div>
      </th>
      <th > View result counter </th>
      <th > Title </th>
      <th > Correct </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-0">
            <input  type="checkbox" id="edit-views-bulk-operations-0" name="views_bulk_operations[0]" value="444">
          </label>
        </div>
      </td>
      <td > 434 </td>
      <td > Which chamber of heart receives oxygenated blood from lungs? </td>
      <td > left atrium </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-1">
            <input  type="checkbox" id="edit-views-bulk-operations-1" name="views_bulk_operations[1]" value="443">
          </label>
        </div>
      </td>
      <td > 433 </td>
      <td >
        <mark>Transport of food in higher plants takes place through:</mark>
      </td>
      <td > Sieve elements </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-2">
            <input  type="checkbox" id="edit-views-bulk-operations-2" name="views_bulk_operations[2]" value="442">
          </label>
        </div>
      </td>
      <td > 432 </td>
      <td > What happens when food reaches the stomach? </td>
      <td > Juices mix with food and stomach muscles squeeze it. </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-3">
            <input  type="checkbox" id="edit-views-bulk-operations-3" name="views_bulk_operations[3]" value="441">
          </label>
        </div>
      </td>
      <td > 431 </td>
      <td >
        <mark>Oxygen which is released during the process of photosynthesis come from?</mark>? </td>
      <td > water </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-4">
            <input  type="checkbox" id="edit-views-bulk-operations-4" name="views_bulk_operations[4]" value="440">
          </label>
        </div>
      </td>
      <td > 430 </td>
      <td >
        <mark>The prerequisites of Calvin cycle are:</mark>
      </td>
      <td > CO<sub>2</sub>   ATP   NADPH </td>
    </tr>
  </tbody>
</table>

CodePudding user response:

To do what you require you can use the :has() selector to find the tr elements which contain a mark, and then find() the checkbox within them.

Also note that you don't need to 'click' the checkbox to set its state, you can update the checked property directly, like this:

$('tr:has(mark)').find(':checkbox').prop('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table >
  <thead>
    <tr>
      <th >
        <div >
          <label >
            <input  type="checkbox" value="1" style="display: inline-block;">
          </label>
        </div>
      </th>
      <th > View result counter </th>
      <th > Title </th>
      <th > Correct </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-0">
            <input  type="checkbox" id="edit-views-bulk-operations-0" name="views_bulk_operations[0]" value="444">
          </label>
        </div>
      </td>
      <td > 434 </td>
      <td > Which chamber of heart receives oxygenated blood from lungs? </td>
      <td > left atrium </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-1">
            <input  type="checkbox" id="edit-views-bulk-operations-1" name="views_bulk_operations[1]" value="443">
          </label>
        </div>
      </td>
      <td > 433 </td>
      <td >
        <mark>Transport of food in higher plants takes place through:</mark>
      </td>
      <td > Sieve elements </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-2">
            <input  type="checkbox" id="edit-views-bulk-operations-2" name="views_bulk_operations[2]" value="442">
          </label>
        </div>
      </td>
      <td > 432 </td>
      <td > What happens when food reaches the stomach? </td>
      <td > Juices mix with food and stomach muscles squeeze it. </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-3">
            <input  type="checkbox" id="edit-views-bulk-operations-3" name="views_bulk_operations[3]" value="441">
          </label>
        </div>
      </td>
      <td > 431 </td>
      <td >
        <mark>Oxygen which is released during the process of photosynthesis come from?</mark>? </td>
      <td > water </td>
    </tr>
    <tr>
      <td >
        <div >
          <label  for="edit-views-bulk-operations-4">
            <input  type="checkbox" id="edit-views-bulk-operations-4" name="views_bulk_operations[4]" value="440">
          </label>
        </div>
      </td>
      <td > 430 </td>
      <td >
        <mark>The prerequisites of Calvin cycle are:</mark>
      </td>
      <td > CO<sub>2</sub>   ATP   NADPH </td>
    </tr>
  </tbody>
</table>

  • Related