Я минимизировал ваш html и добавил класс для .answers
в таблицу. Также я переместил input
в label
. Теперь этот маленький пример покажет вам, как это сделать.
Отредактировал код после последнего комментария
Я изменил раздел jQuery для вашего описанного случая в комментарии. Теперь при необходимости можно создать несколько вопросов / ответов на одной странице.
$(document).ready(function() {
$('#unansweredquestion').on('change', toggleUnansweredQuestions);
$('.answers input[type="checkbox"]').on('change', toggleUnansweredQuestions);
function toggleUnansweredQuestions(event) {
var toggleCheckbox = $('#unansweredquestion');
var answers = $('.answers');
if (toggleCheckbox.prop('checked')) {
answers.each(function(index, answer) {
var $answer = $(answer);
var hasAnswers = $answer.find('input:checked').length > 0;
if (hasAnswers) {
$answer.removeClass('highlighted');
} else {
$answer.addClass('highlighted');
}
});
} else {
answers.removeClass('highlighted');
}
}
});
.highlighted { background-color: #f00; color: #0f0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="unansweredquestion">
<input id="unansweredquestion" type="checkbox" name="uquestion" /> Show Unanswered Questions
</label>
<table id="maincontent_lvTest_CheckBoxList1_0" class="answers">
<tr>
<td>
<label for="maincontent_lvTest_CheckBoxList1_0_0_0">
<input id="maincontent_lvTest_CheckBoxList1_0_0_0" type="checkbox" name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$0" value="2169" /> Extraterrestrial Being
</label>
</td>
</tr>
<tr>
<td>
<label for="maincontent_lvTest_CheckBoxList1_0_1_0">
<input id="maincontent_lvTest_CheckBoxList1_0_1_0" type="checkbox" name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$1" value="2167" /> God
</label>
</td>
</tr>
<tr>
<td>
<label for="maincontent_lvTest_CheckBoxList1_0_2_0">
<input id="maincontent_lvTest_CheckBoxList1_0_2_0" type="checkbox" name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$2" value="2168" /> Man
</label>
</td>
</tr>
</table>