Как узнать группу флажков в Jquery - PullRequest
Новая
       16

Как узнать группу флажков в Jquery

3 голосов
/ 15 февраля 2012

Моя HTML-форма содержит много групп флажков, я хочу проверить, выбран ли хотя бы один флажок из каждой группы.

Например, 

// Group vehicle
<input type="checkbox" name="vehicle" value="Bike"/> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car"/> I have a car <br/>   

// Group language
<input type="checkbox" name="language" value="JS"/> I am JS Ninja <br/>
<input type="checkbox" name="language" value="Android"/> I am a droid <br/>

Я могу использовать следующий селектор Jquery, чтобы проверить, установлен ли хотя бы один флажок 

if($(":checkbox:checked[vehicle]").length) > 1
if($(":checkbox:checked[language]").length) > 1

Но я должен повторять этот селектор для каждогофлажок группы.Моя страница содержит много групп флажков.Есть ли другой способ, с помощью которого я могу выбрать все группы флажков в одном селекторе jquery?

Спасибо!

Ответы [ 4 ]

3 голосов
/ 15 февраля 2012

Даже при том, что логика казалась правильной, я не мог заставить решение b1naryj работать.
Я продолжил работать над этим на его примере и, наконец, начал работать:

Пример: http://jsfiddle.net/elclanrs/GFCKA/1/

JQ: 

var testCheckboxes = function(){
    var $checkboxes = $(':checkbox'),
        names = [],
        num = 0;
    $checkboxes.each(function(){
        var name = $(this).attr('name');
        if ($.inArray(name, names) === -1) {
            names.push(name);
        }
    });
    $.each(names, function(i, v){
        if ($checkboxes.filter('[name="'+v+'"]:checked').length >= 1) { num++; }
    });
    if (num === names.length) { alert('Yup!'); }
};
1 голос
/ 15 февраля 2012

Обновлено, как и было обещано, как только у меня будет время полностью протестировать исходный пример кода. Я вижу, вы, ребята, пошли немного за борт, для работы потребовались лишь незначительные изменения: D

Я также сделал его немного более эффективным, не повторяя селекторы флажка jQuery несколько раз.

И результат: 

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        function checkedTest() {
            var nameArr = new Array();
            var finalResult = true;
            var allCheckboxes = $("input[type=checkbox]");

            // Put all the unique name attributes in an array.
            allCheckboxes.each(function(){
                var name = $(this).attr("name");
                if($.inArray(name, nameArr) == -1)
                    nameArr.push(name);
            });

            // Go through each name attribue and make sure at least one is checked.
            $.each(nameArr, function(index, value){
                if(allCheckboxes.filter("[name=" + value + "]:checked").length == 0)
                    finalResult = false;
            });

            return finalResult;
        }
    </script>
</head>
<body>
    Group1Box1: <input type="checkbox" id="group1Box1" name="group1"/>
    Group1Box2: <input type="checkbox" id="group1Box2" name="group1"/>
    <br/>
    Group2Box1: <input type="checkbox" id="group2Box1" name="group2"/>
    Group2Box2: <input type="checkbox" id="group2Box2" name="group2"/>
    <br/>
    Group3Box1: <input type="checkbox" id="group3Box1" name="group3"/>
    Group3Box2: <input type="checkbox" id="group3Box2" name="group3"/>
    <br/><br/>
    <input type="button" value="Test!" onclick="alert(checkedTest());"/>
</body>
</html>
0 голосов
/ 15 февраля 2012 
// If you know the names just setting its here like var names = ["vehicle","language"]
var names = [];
// Find out the checkbox group names
$(":checkbox").each(function(){
  names.push(this.name);
});
names = $.unique(names);

var pass = true;
$.each(names, function(){
  if(!pass) return;
  pass = !!$("[name=" + this + "]:checkbox:checked").length;
});
alert("Pass? " + pass);

Оформить заказ ЗДЕСЬ

0 голосов
/ 15 февраля 2012

Я думаю, что это будет работать для вас: 

$('.submit').click(function() {
    var vehicles= $("input[name='vehicle']").serializeArray(); 
      alert(vehicles.length + ' vehicles selected.');
    var languages = $("input[name='language']").serializeArray(); 
    alert(languages .length + ' languages  selected.');
});

Затем вы можете проверить длину chkbx.Вот как это можно использовать:

http://jsfiddle.net/WTudu/5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...