Перебрать все флажки в div с определенным классом

Question

Перебрать все флажки в div с определенным классом

0

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

JS

<script>
function calculate()
{
    $('#payments').find('.checkBoxP').each(function() {
        if ( $('.checkBoxP').prop('checked') )
        {
            alert('its on');
        }
        if ( !$('.checkBoxP').prop('checked') )
        {
            alert('nope');
        }
    });
}

calculate();
</script>

HTML

<div class="row-fluid" id="payments">
   <div class="span4">Sale No # 112<div class="widget-header">
                    <span>Pizza</span>
                        <span class="shopp-price" style="margin-right:5px;"> $<em>10.90</em>
                        </span>
                        <span class="widget-toolbar">
                            <label>
                                <input onchange="calculate();" type="checkbox" class="checkBoxP"></input>
                                <span class="lbl"></span>
                            </label>
                        </span>
                    </div>Sale No # 110<div class="widget-header">
                    <span>Coca Cola</span>
                        <span class="shopp-price" style="margin-right:5px;"> $<em>17.20</em>
                        </span>
                        <span class="widget-toolbar">
                            <label>
                                <input onchange="calculate();" type="checkbox" class="checkBoxP"></input>
                                <span class="lbl"></span>
                            </label>
                        </span>
                    </div>

Обратите внимание, что ниже есть еще несколько inputs которые я не хочу включать в поиск, почему я вставил класс.

LefterisL 04 апр. 2014, в 11:04

Источник

2

Используйте $(this).prop('checked') вместо $('.checkBoxP').prop('checked')
Dhaval Marthak 04 апр. 2014, в 08:30

Теги:

javascript

jquery

html

5 ответов

3

Вот самый краткий способ сделать это!

function calculate() {
    $("#payments .checkBoxP").each(function() {
        alert($(this).is(":checked") ? "it on" : "nope");
    });
}

http://jsfiddle.net/4vAPU/

Это также может быть достигнуто с использованием чистого JavaScript, хотя в этом случае вам нужно быть уверенным, что вы реализуете правильные полисы для querySelectorAll и forEach:

function calculate() {
    document.querySelectorAll("#payments .checkBoxP").forEach(function (val, index, arr) {
        alert(arr[index].checked ? "it on" : "nope");
    });
}

series0ne 04 апр. 2014, в 06:25

2

Проверить текущий элемент проверен или нет с помощью $(this).is(':checked')

function calculate() {
    $('#payments').find('.checkBoxP').each(function () {
        if ($(this).is(':checked')) {
            alert('its on');
        } else {
            alert('nope');
        }
    });
}

Fiddle DEMO

Sridhar R 04 апр. 2014, в 07:01

2

Вы можете попробовать это также

function calculate()
{
    $('#payments input.checkBoxP').each(function() {
        if ( $(this).is(':checked') )
        {
            alert('its on');
        }
        else{
            alert('nope');
        }
    });
}

calculate();

ДЕМО ЗДЕСЬ

Kiranramchandran 04 апр. 2014, в 06:35

0

Это чистая версия JS

function calculate() {
    var checks = document.getElementsByClassName('checkBoxP');
    var checked_elms = [];
    checks.forEach(function(val, index, ar) {
        if(ar[index].checked) {
            checked_elms.push(ar[index]);
        }
    });
    console.log(checked_elms);
}

Ryan McCullagh 04 апр. 2014, в 06:20

Ещё вопросы

Используйте $(this).prop('checked') вместо $('.checkBoxP').prop('checked')

Arun P Johny · Accepted Answer · 2014-04-04T06-28-00.000Z

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

function calculate() {
    $('#payments').find('.checkBoxP').each(function () {
        if (this.checked) {
            alert('its on');
        } else {
            alert('nope');
        }
    });
}