jQuery, чтобы выбрать все неотвеченные вопросы с несколькими вариантами ответов - PullRequest
0 голосов
/ 30 апреля 2020

Не могли бы вы помочь мне, пожалуйста.

Мне нужен код jquery, чтобы выбрать все оставшиеся без ответа вопросы в тесте с несколькими вариантами ответов. Вопросы с множественным выбором имеют 3 типа: (1) один ответ (2) множественный ответ (3) да / нет ответа

Выбрав, я имею в виду сделать фон вопроса / ответа другим цветом, на установив флажок «Показать оставшиеся без ответа вопросы»

    <div class="container-fluid">
        <div>
            <input id="unansweredquestion" type="checkbox" name="uquestion" /><label for="unansweredquestion"> Show Unanswered Questions</label>
        <div>
        <div class="card">
            <div class="card-header">
                <strong>
                    Question
                    <span id="maincontent_lvTest_lblRowNumber_0">1</span>
                </strong>
                <div style="float: right">
                    <input id="maincontent_lvTest_CheckBox1_0" type="checkbox" name="ctl00$maincontent$lvTest$ctrl0$CheckBox1" /><label for="maincontent_lvTest_CheckBox1_0"> Doubtful</label>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">
                    <input type="hidden" name="ctl00$maincontent$lvTest$ctrl0$hfQuesId" id="maincontent_lvTest_hfQuesId_0" value="3088" />
                    <input type="hidden" name="ctl00$maincontent$lvTest$ctrl0$hfQuestionType" id="maincontent_lvTest_hfQuestionType_0" value="2" />
                    <span id="maincontent_lvTest_lblQuestiontext_0">Who created the World?</span>
                </h5>
                <p class="card-text">
                    <table id="maincontent_lvTest_CheckBoxList1_0">
                        <tr>
                            <td><input id="maincontent_lvTest_CheckBoxList1_0_0_0" type="checkbox" name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$0" value="2169" /><label for="maincontent_lvTest_CheckBoxList1_0_0_0">Extraterrestrial Being</label></td>
                        </tr>
                        <tr>
                            <td><input id="maincontent_lvTest_CheckBoxList1_0_1_0" type="checkbox" name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$1" value="2167" /><label for="maincontent_lvTest_CheckBoxList1_0_1_0">God</label></td>
                        </tr>
                        <tr>
                            <td><input id="maincontent_lvTest_CheckBoxList1_0_2_0" type="checkbox" name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$2" value="2168" /><label for="maincontent_lvTest_CheckBoxList1_0_2_0">Man</label></td>
                        </tr>
                    </table>
                </p>
            </div>
        </div>


        <div class="card">
            <div class="card-header">
                <strong>
                    Question
                    <span id="maincontent_lvTest_lblRowNumber_1">2</span>
                </strong>
                <div style="float: right">
                    <input id="maincontent_lvTest_CheckBox1_1" type="checkbox" name="ctl00$maincontent$lvTest$ctrl1$CheckBox1" /><label for="maincontent_lvTest_CheckBox1_1"> Doubtful</label>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">
                    <input type="hidden" name="ctl00$maincontent$lvTest$ctrl1$hfQuesId" id="maincontent_lvTest_hfQuesId_1" value="3116" />
                    <input type="hidden" name="ctl00$maincontent$lvTest$ctrl1$hfQuestionType" id="maincontent_lvTest_hfQuestionType_1" value="3" />
                    <span id="maincontent_lvTest_lblQuestiontext_1">Is the Earth round?</span>
                </h5>
                <p class="card-text">
                    <table id="maincontent_lvTest_RadioButtonList2_1">
                        <tr>
                            <td><input id="maincontent_lvTest_RadioButtonList2_1_0_1" type="radio" name="ctl00$maincontent$lvTest$ctrl1$RadioButtonList2" value="2336" /><label for="maincontent_lvTest_RadioButtonList2_1_0_1">No</label></td>
                        </tr>
                        <tr>
                            <td><input id="maincontent_lvTest_RadioButtonList2_1_1_1" type="radio" name="ctl00$maincontent$lvTest$ctrl1$RadioButtonList2" value="2335" /><label for="maincontent_lvTest_RadioButtonList2_1_1_1">Yes</label></td>
                        </tr>
                    </table>
                </p>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <strong>
                    Question
                    <span id="maincontent_lvTest_lblRowNumber_2">3</span>
                </strong>
                <div style="float: right">
                    <input id="maincontent_lvTest_CheckBox1_2" type="checkbox" name="ctl00$maincontent$lvTest$ctrl2$CheckBox1" /><label for="maincontent_lvTest_CheckBox1_2"> Doubtful</label>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">

                    <input type="hidden" name="ctl00$maincontent$lvTest$ctrl2$hfQuesId" id="maincontent_lvTest_hfQuesId_2" value="3082" />
                    <input type="hidden" name="ctl00$maincontent$lvTest$ctrl2$hfQuestionType" id="maincontent_lvTest_hfQuestionType_2" value="1" />
                    <span id="maincontent_lvTest_lblQuestiontext_2">Who wrote "The man is the man"?</span>
                </h5>
                <p class="card-text">

                    <table id="maincontent_lvTest_RadioButtonList1_2">
                        <tr>
                            <td><input id="maincontent_lvTest_RadioButtonList1_2_0_2" type="radio" name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2134" /><label for="maincontent_lvTest_RadioButtonList1_2_0_2">Ryan</label></td>
                        </tr>
                        <tr>
                            <td><input id="maincontent_lvTest_RadioButtonList1_2_1_2" type="radio" name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2132" /><label for="maincontent_lvTest_RadioButtonList1_2_1_2">Daudet</label></td>
                        </tr>
                        <tr>
                            <td><input id="maincontent_lvTest_RadioButtonList1_2_2_2" type="radio" name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2133" /><label for="maincontent_lvTest_RadioButtonList1_2_2_2">Claude</label></td>
                        </tr>
                        <tr>
                            <td><input id="maincontent_lvTest_RadioButtonList1_2_3_2" type="radio" name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2131" /><label for="maincontent_lvTest_RadioButtonList1_2_3_2">Alphone</label></td>
                        </tr>
                    </table>
                </p>
            </div>
        </div>
</div>

Большое спасибо

Tairon

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Я минимизировал ваш 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>
0 голосов
/ 30 апреля 2020
  • добавьте имя класса как "вопрос" к карточке с вопросами
  • добавьте имя класса как "ответ" к ответам.
  • добавьте класс для изменения фон на вопросы без ответа поставлен флажок

Код:

.unanswered {
            background: azure;
        }
<div class="container-fluid">
        <div id="maincontent_UpdatePanel1">
            <div>
                <input id="unansweredquestion" type="checkbox" name="uquestion" /><label for="unansweredquestion"> Show
                    Unanswered Questions</label>
                <div>
                    <div class="card question">
                        <div class="card-header">
                            <strong>
                                Question
                                <span id="maincontent_lvTest_lblRowNumber_0">1</span>
                            </strong>
                            <div style="float: right">
                                <input id="maincontent_lvTest_CheckBox1_0" type="checkbox"
                                    name="ctl00$maincontent$lvTest$ctrl0$CheckBox1" /><label
                                    for="maincontent_lvTest_CheckBox1_0"> Doubtful</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">
                                <input type="hidden" name="ctl00$maincontent$lvTest$ctrl0$hfQuesId"
                                    id="maincontent_lvTest_hfQuesId_0" value="3088" />
                                <input type="hidden" name="ctl00$maincontent$lvTest$ctrl0$hfQuestionType"
                                    id="maincontent_lvTest_hfQuestionType_0" value="2" />
                                <span id="maincontent_lvTest_lblQuestiontext_0">Who created the World?</span>
                            </h5>
                            <p class="card-text">
                                <table id="maincontent_lvTest_CheckBoxList1_0">
                                    <tr>
                                        <td><input id="maincontent_lvTest_CheckBoxList1_0_0_0" type="checkbox"
                                                name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$0" value="2169"
                                                class="answer" /><label
                                                for="maincontent_lvTest_CheckBoxList1_0_0_0">Extraterrestrial
                                                Being</label></td>
                                    </tr>
                                    <tr>
                                        <td><input id="maincontent_lvTest_CheckBoxList1_0_1_0" type="checkbox"
                                                name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$1" value="2167"
                                                class="answer" /><label
                                                for="maincontent_lvTest_CheckBoxList1_0_1_0">God</label></td>
                                    </tr>
                                    <tr>
                                        <td><input id="maincontent_lvTest_CheckBoxList1_0_2_0" type="checkbox"
                                                name="ctl00$maincontent$lvTest$ctrl0$CheckBoxList1$2" value="2168"
                                                class="answer" /><label
                                                for="maincontent_lvTest_CheckBoxList1_0_2_0">Man</label></td>
                                    </tr>
                                </table>
                            </p>
                        </div>
                    </div>


                    <div class="card question">
                        <div class="card-header">
                            <strong>
                                Question
                                <span id="maincontent_lvTest_lblRowNumber_1">2</span>
                            </strong>
                            <div style="float: right">
                                <input id="maincontent_lvTest_CheckBox1_1" type="checkbox"
                                    name="ctl00$maincontent$lvTest$ctrl1$CheckBox1" /><label
                                    for="maincontent_lvTest_CheckBox1_1"> Doubtful</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">
                                <input type="hidden" name="ctl00$maincontent$lvTest$ctrl1$hfQuesId"
                                    id="maincontent_lvTest_hfQuesId_1" value="3116" />
                                <input type="hidden" name="ctl00$maincontent$lvTest$ctrl1$hfQuestionType"
                                    id="maincontent_lvTest_hfQuestionType_1" value="3" />
                                <span id="maincontent_lvTest_lblQuestiontext_1">Is the Earth round?</span>
                            </h5>
                            <p class="card-text">
                                <table id="maincontent_lvTest_RadioButtonList2_1">
                                    <tr>
                                        <td><input id="maincontent_lvTest_RadioButtonList2_1_0_1" type="radio"
                                                name="ctl00$maincontent$lvTest$ctrl1$RadioButtonList2" value="2336"
                                                class="answer" /><label
                                                for="maincontent_lvTest_RadioButtonList2_1_0_1">No</label></td>
                                    </tr>
                                    <tr>
                                        <td><input id="maincontent_lvTest_RadioButtonList2_1_1_1" type="radio"
                                                name="ctl00$maincontent$lvTest$ctrl1$RadioButtonList2" value="2335"
                                                class="answer" /><label
                                                for="maincontent_lvTest_RadioButtonList2_1_1_1">Yes</label></td>
                                    </tr>
                                </table>
                            </p>
                        </div>
                    </div>

                    <div class="card question">
                        <div class="card-header">
                            <strong>
                                Question
                                <span id="maincontent_lvTest_lblRowNumber_2">3</span>
                            </strong>
                            <div style="float: right">
                                <input id="maincontent_lvTest_CheckBox1_2" type="checkbox"
                                    name="ctl00$maincontent$lvTest$ctrl2$CheckBox1" /><label
                                    for="maincontent_lvTest_CheckBox1_2"> Doubtful</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">

                                <input type="hidden" name="ctl00$maincontent$lvTest$ctrl2$hfQuesId"
                                    id="maincontent_lvTest_hfQuesId_2" value="3082" />
                                <input type="hidden" name="ctl00$maincontent$lvTest$ctrl2$hfQuestionType"
                                    id="maincontent_lvTest_hfQuestionType_2" value="1" />
                                <span id="maincontent_lvTest_lblQuestiontext_2">Who wrote "The man is the man"?</span>
                            </h5>
                            <p class="card-text">

                                <table id="maincontent_lvTest_RadioButtonList1_2">
                                    <tr>
                                        <td><input id="maincontent_lvTest_RadioButtonList1_2_0_2" type="radio"
                                                name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2134"
                                                class="answer" /><label
                                                for="maincontent_lvTest_RadioButtonList1_2_0_2">Ryan</label></td>
                                    </tr>
                                    <tr>
                                        <td><input id="maincontent_lvTest_RadioButtonList1_2_1_2" type="radio"
                                                name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2132"
                                                class="answer" /><label
                                                for="maincontent_lvTest_RadioButtonList1_2_1_2">Daudet</label></td>
                                    </tr>
                                    <tr>
                                        <td><input id="maincontent_lvTest_RadioButtonList1_2_2_2" type="radio"
                                                name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2133"
                                                class="answer" /><label
                                                for="maincontent_lvTest_RadioButtonList1_2_2_2">Claude</label></td>
                                    </tr>
                                    <tr>
                                        <td><input id="maincontent_lvTest_RadioButtonList1_2_3_2" type="radio"
                                                name="ctl00$maincontent$lvTest$ctrl2$RadioButtonList1" value="2131"
                                                class="answer" /><label
                                                for="maincontent_lvTest_RadioButtonList1_2_3_2">Alphone</label></td>
                                    </tr>
                                </table>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
$("document").ready(function () {
    getAllUnansweredQuestions();
    toggleUnanswered();
});

function getAllUnansweredQuestions() {
    $('#unansweredquestion').on('change', function () {
        if ($(this).is(":checked")) {
            const questions = $('.question');

            questions.each(function () {
                if (!$(this).find('.answer').is(':checked')) {
                    $(this).addClass('unanswered');
                }
            });
        } else {
            $('.question').removeClass('unanswered')
        }
    });
}

function toggleUnanswered() {
    $('.answer').on('change', function () {
        const isChecked = ($(this).is(":checked"));

        if ($('#unansweredquestion').is(":checked")) {
            if (isChecked) {
                $(this).offsetParent().removeClass('unanswered');
            } else {
                $(this).offsetParent().addClass('unanswered');
            }
        }
    });
}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...