Question

我的表单上有几个单选按钮控件。

<input type="radio" name="Gender" value="M">Male
<input type="radio" name="Gender" value="F">Female

<input type="radio" name="Vehicle" value="H">Honda
<input type="radio" name="Vehicle" value="T">Toyota
<input type="radio" name="Vehicle" value="L">Lexus
<input type="radio" name="Vehicle" value="M">Mercedes
<input type="radio" name="Vehicle" value="V">VW

<input type="radio" name="Device" value="D">Desktop
<input type="radio" name="Device" value="L">Laptop
<input type="radio" name="Device" value="S">SmartPhone
<input type="radio" name="Device" value="T">Tablet

<input type="button" onclick="javascript:ButtonClick();" name="Next">

现在我希望在调用ButtonClick()时，它应该验证每个组中至少有一个单选按钮被调用。

我想要的是一个jQuery函数，它将循环遍历所有单选按钮控件并由每个组验证它们。

$("<CORRECT SELECTOR>").each(function() {
    // Validate this radio button group
});

如果已经提出要求，请指出我。感谢您的帮助。

Answer 1

也许是这样的：

SEE jsFiddle

function ButtonClick() {
    var valid = true;
    var grps = $.unique($('input[type=radio]').map(function () {
        return this.name
    }).get());
    $.each(grps, function (_, grp) {
        if (!$('input[type=radio]').filter('[name="' + grp + '"]').is(':checked')) {
            alert('No radio ' + grp + ' is checked!'); 
            valid = false;
            return;
        }
    });    

    if(valid) alert('At least one radio of each group checked!');
}

Answer 2

它更长但是...高效，可读和可重复使用的。

Demo @ CodePen.io (better than JSFiddle :cool:)

function verify() {
  var groups = determineGroups();
  var invalidGroups = verifyGroups( groups );

  if( invalidGroups && invalidGroups.length ) {
    var groupsString = invalidGroups.join("," );

    notify( "Please specify values for " + groupsString );
  }
}

function determineGroups() {
  var groupsHash = {}, 
      groups = [];

  $("input[type='radio']").each(function(){

    var groupName = this.name;
    if( !groupsHash[groupName] ) {

      groupsHash[ groupName ] = 1;

      groups.push( groupName );
    }
  });
  return groups;
}

function verifyGroups( groups ) {

  var invalidGroups = [];

  for( var i = 0, ln = groups.length; i < ln; i++ ) {

    if( !groupHasValue( groups[ i ] ) ) {

      invalidGroups.push( groups[ i ] );
    }
  }
  return invalidGroups;
}

function groupHasValue( group ) {

  var hasValidValue = false;

  $("input[name=" + group + "]").each(function() {

    if( this.checked ) {
      hasValidValue = true;
    }
  });

  return hasValidValue;
}

function notify( txt ) {
  alert( txt );
}

Answer 3

的 JSFIDDLE DEMO 的

$('[name="Next"]').click(function () { var radios = []; $('input[type=radio]').each(function () { radios.push(this.name); }); radios = Getunique(radios); console.log(radios); $.each(radios, function (i, val) { var selected = $('[name=' + val + ']').is(':checked'); if (!selected) { alert("select " + val); } }); }); function Getunique(list) { var result = []; $.each(list, function (i, e) { if ($.inArray(e, result) == -1) result.push(e); }); return result; }

jQuery迭代验证单选按钮组

3 个答案: