Question

HTML：

<div id="quiz">
<div id="question">
    <p id="quiz-txt">Your Name is:</p>
    <ul id="quiz-opt">
        <div id="ans">
            <input type="checkbox" id="Bob" value="Bob" class="options">
            <label for="Bob">Bob</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="David" value="David" class="options">
            <label for="David">David</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="Jack" value="Jack" class="options">
            <label for="Jack">Jack</label>
        </div>
    </ul>
</div>
.
.
.
.
<div id="question">
    <p id="quiz-txt">This is the final question.</p>
    <ul id="quiz-opt">
        <div id="ans">
            <input type="checkbox" id="Yes" value="Yes" class="options">
            <label for="Yes">Yes</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="No" value="No" class="options">
            <label for="No">No</label>
        </div>
    </ul>
</div>

这些div（问题）中大约有10个是在旅途中创建的（从服务器获取数组）。

所以，我的问题是我如何获得被检查的复选框的值？

以下是我在JavaScript中尝试的内容：

$('#quiz').children('#question').children('#quiz-opt').children('#ans').children('.options:checked').each(function () {
    console.log($(this).val());
});

Answer 1

这个（尽管是免费的jQuery）解决方案对我有用。检查一些框，然后单击复选按钮

function check() {
  document.querySelectorAll(".options:checked").forEach(el => {
    console.log(el.value);
  });
  console.log("-----------------------");
}

<div id="quiz">
<div id="question">
    <p id="quiz-txt">Your Name is:</p>
    <ul id="quiz-opt">
        <div id="ans">
            <input type="checkbox" id="Bob" value="Bob" class="options">
            <label for="Bob">Bob</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="David" value="David" class="options">
            <label for="David">David</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="Jack" value="Jack" class="options">
            <label for="Jack">Jack</label>
        </div>
    </ul>
</div>
.
.
.
.
<div id="question">
    <p id="quiz-txt">This is the final question.</p>
    <ul id="quiz-opt">
        <div id="ans">
            <input type="checkbox" id="Yes" value="Yes" class="options">
            <label for="Yes">Yes</label>
        </div>
        <div id="ans">
            <input type="checkbox" id="No" value="No" class="options">
            <label for="No">No</label>
        </div>
    </ul>
</div>

<button onClick="check()">Check values</button>

访问输入元素的嵌套路径

1 个答案: