使用 JQuery 动态检查是否没有选中多个组的单选按钮

Question

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

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

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

参考：

我的代码如下：

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

看起来您已经知道如何计算已检查的元素。如果你把它放在第一个循环中，你可以将一个变量标记为假，如果有空的话。

var names = [];
var allChecked = true;

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

Answer 2

改变了

<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>

Answer 3

https://jsfiddle.net/eu6L1f80/2/

Javascript：

$('form').on('submit', function(e) {
    e.preventDefault();

    var checkboxes = {};
    $(':checkbox').each(function() {
        checkboxes[$(this).attr('name')] = true;
    });

    $.each(checkboxes, function(i, val) {
        if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
    });

    if (!Object.keys(checkboxes).length) {
        alert('success!');
    } else {
        alert('error!');
    }
});

HTML：

<form>
    <div>
        Group:
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
    </div>
    <button type="submit">Submit</button>
<form>