访问输入元素的嵌套路径

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>

这些divs（问题）中有大约10个是随时随地创建的（从服务器获取数组）。

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

这是我在JavaScript中尝试的内容：

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

Answer 1

你不需要所有的路径，它的最后一点是足够的$('.options:checked')。也无需将this转换为jQuery对象，只需访问其JavaScript value属性：

function check() {
  $('.options:checked').each(function() {
    console.log(this.value);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 type="button" onclick="check()">Check</button>

Answer 2

这个（虽然是免费的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>