使用jQuery获取每个div的嵌套内部内容值

Question

我正在尝试获取所有单选按钮的选定值，如果没有选择其中一个，则为空值。下面是我的HTML代码：

<div class="question m-2">
    <div class="question-title">Question 1</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-1">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-1">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-1">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-1">Option d
        </label>
    </div>
</div>
<div class="question m-2">
    <div class="question-title">Question 2</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-2">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-2">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-2">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-2">Option d
        </label>
    </div>
</div>
<div class="question m-2">
    <div class="question-title">Question 3</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-3">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-3">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-3">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-3">Option d
        </label>
    </div>
</div>

我想存储每个问题的所有答案，如果被选中，那么被选中的值，如果没有被选中，那么空值。有人能帮我编写jQuery代码吗？

Answer 1

你可以得到这样的答案：

​

$("#submit").on("click", function() {
  let questions = $(".question");
  let answers = [];
  let answer;
  questions.each(function() {
     if ($(this).find("input[type='radio']:checked").length) {
        answer = $(this).find("input[type='radio']:checked").val();
     } else {
        answer = "null";
     }        
     answers.push(answer);
  });
  console.log(answers);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question m-2">
    <div class="question-title">Question 1</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-1">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-1">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-1">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-1">Option d
        </label>
    </div>
</div>
<div class="question m-2">
    <div class="question-title">Question 2</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-2">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-2">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-2">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-2">Option d
        </label>
    </div>
</div>
<div class="question m-2">
    <div class="question-title">Question 3</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-3">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-3">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-3">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-3">Option d
        </label>
    </div>
</div>
<button id="submit">
Submit
</button>

​

Answer 2

你也可以用javascript得到它

​

const questions = document.querySelectorAll('.question');
const answers = Array.from(questions).map(e => e.querySelector('input.form- 
      check - input: checked ').value);

​

在JQuery中

​

const answers = $('.question input.form-check-input:checked').val();

​