i want to loop through certain checkboxes with a specific class that are inside a div. I know how i can achieve this by adding ID's to each and everyone of them but that's not what i want to go for. Below is my code

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>

Note that below there are couple more inputs which i don't want to include in the search that's why i have inserted the class.

i want to loop through certain checkboxes with a specific class that are inside a div. I know how i can achieve this by adding ID's to each and everyone of them but that's not what i want to go for. Below is my code

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>

Note that below there are couple more inputs which i don't want to include in the search that's why i have inserted the class.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 4, 2014 at 8:31 kpmDev 1,37011 gold badge1111 silver badges2929 bronze badges asked Apr 4, 2014 at 8:27 LefterisLLefterisL 1,15344 gold badges1818 silver badges3737 bronze badges 1

• 2 Use $(this).prop('checked') instead $('.checkBoxP').prop('checked') – Dhaval Marthak Commented Apr 4, 2014 at 8:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You need to check whether the currently iterated checkbox is checked, instead you condition will always check whether the first checkbox is checked or not

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

Here is the most succinct way to do it!

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

http://jsfiddle/4vAPU/

This can also be achieved with pure JavaScript, though in this instance you need to be sure that you implement the correct polyfills for querySelectorAll and forEach:

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

Check current element is checked or not using $(this).is(':checked')

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

Fiddle DEMO

You Can Try this Also

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

calculate();

DEMO HERE

Heres a pure JS version

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);
}