jquery中的多个单选按钮（同名）处理

Question

我在这里有这样的设置：

$(document).on("click", "#updateLocation", function() {
  $('.radio_btn').each(function(index) {
    console.log($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="progressForm">
  <input type="text" readonly="readonly" value="question 1">
  <label><input type="radio" name="isActive[1]" value="1" class="radio_btn">done</label>
  <label><input type="radio" name="isActive[1]" value="0" class="radio_btn">not yet done</label>

  <input type="text" readonly="readonly" value="question 2">
  <label><input type="radio" name="isActive[12]" value="1" class="radio_btn">done</label>
  <label><input type="radio" name="isActive[12]" value="0" class="radio_btn">not yet done</label>

  <input type="text" readonly="readonly" value="question 3">
  <label><input type="radio" name="isActive[35]" value="1" class="radio_btn">done</label>
  <label><input type="radio" name="isActive[35]" value="0" class="radio_btn">not yet done</label>

  <button type="button" id="updateLocation">Update</button>
</form>

如您所见，name-attribute 没有遵循关于数字索引的特定模式。但是，我有一个用于“OK”和“NOT OK”的单选按钮。由于它们具有相同的名称，因此只能检查其中一个选项。

现在，我想在 jQuery 中评估这些值。

正如您可能已经看到的那样，这是行不通的，因为DOM 似乎（如预期的那样）覆盖了以前的值。我需要处理每个复选框，因为这两个值都是有效的并且需要插入到我的数据库中。

如何从单选按钮获取值（无论是否选中）？

假设

• 单选按钮 1 已选中
• radio-button2 未选中
• 单选按钮 3 已选中

在我的each 函数中，我应该得到1、0、1 的值。也许我只是盲目地看到了解决方案，但它对我来说看起来很基本。

另外，我能否以某种方式从当前迭代的复选框中获取索引 (1, 12, 35..)？

Answer 1

选择要循环的:checked 无线电并使用substring 获取索引：

$(document).on("click", "#updateLocation", function() {
    $('.radio_btn:checked').each(function(index) {
        var name = $(this).attr('name');
        console.log(name.substring(name.indexOf('[') + 1, name.length - 1));
        console.log($(this).val());
    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="progressForm">
    <input type="text" readonly="readonly" value="question 1">
    <label><input type="radio" name="isActive[1]" value="1" class="radio_btn">done</label>
    <label><input type="radio" name="isActive[1]" value="0" class="radio_btn">not yet done</label>

    <input type="text" readonly="readonly" value="question 2">
    <label><input type="radio" name="isActive[12]" value="1" class="radio_btn">done</label>
    <label><input type="radio" name="isActive[12]" value="0" class="radio_btn">not yet done</label>

    <input type="text" readonly="readonly" value="question 3">
    <label><input type="radio" name="isActive[35]" value="1" class="radio_btn">done</label>
    <label><input type="radio" name="isActive[35]" value="0" class="radio_btn">not yet done</label>

     <button type="button" id="updateLocation">Update</button>
</form>