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