javascript - 使用 JQuery 动态检查是否已检查多组单选按钮

Question

我知道这个问题有很多相关资源。但是，我仍然需要一个完美的解决方案。

我动态生成了五个单选按钮组。每组最多包含五个单选按钮。我已将“未 checkin ”和“至少一项 checkin 功能”作为一个单独的组进行了验证。

我的问题是，如何验证“所有组都已检查”

供引用:

我的代码如下:

var names = [];

$('input[type="radio"]').each(function() {
    // Creates an array with the names of all the different checkbox group.
    names[$(this).attr('name')] = true;
});

// Goes through all the names and make sure there's at least one checked.
for (name in names) {
    var radio_buttons = $("input[name='" + name + "']");
    if (radio_buttons.filter(':checked').length == 0) {
        alert('none checked in ' + name);
    } 
    else{
        // At least one checked
        var val = radio_buttons.val();
    }
}

选中所有单选按钮组后，我需要重定向到其他页面。它有点简单。但是，对我来说看起来很复杂。

请帮助。

更新 我为前两组生成的 HTML。

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
    </ul></div></div></div>

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
    </ul></div></div></div>

注意:这里只有组名会发生变化。

Answer 1

改变了

<div id="ratingContainer">

到

<div class="ratingContainer"> .

已删除

onclick="checkThis(this);"

从 html 开始，为所有输入元素添加了一个事件处理程序

elems.find("input").on("change", checkThis);

尝试

var allChecked = false;

var names = [];

var elems = $(".0");

function checkThis(e) {
  var name = e.target.name;
  if (names.length < elems.length) {
    names.push(name);
  };

  allChecked = elems.get().every(function(el, i) {
    return $(el).find(":checked").is("*")
  });

  alert(name + " checked");

  if (allChecked) {
    // do stuff
    alert(names.join(" and ") + " checked, " + "allChecked:" + allChecked);
  };

};

elems.find("input").on("change", checkThis);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="optionsContainer">
    <div class="ratingContainer">
      <ul class="0">
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly disagree" name="0" id="1">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Disagree" name="0" id="2">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Neutral" name="0" id="3">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Agree" name="0" id="4">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly agree" name="0" id="5">
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="row">
  <div class="optionsContainer">
    <div class="ratingContainer">
      <ul class="0">
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly disagree" name="1" id="1">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Disagree" name="1" id="2">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Neutral" name="1" id="3">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Agree" name="1" id="4">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly agree" name="1" id="5">
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>