jQuery - How to use each() in click event jquery?

Question

Please see my html code:

<form action="#" class="check_opt" id="ckPrice">
    <p><input class="niceCheck" type="checkbox" name="" value="0-49">3 millions - 10 millions (21)</p>
    <p><input class="niceCheck" type="checkbox" name="" value="50-99"> >10 millions - 15 millions (7)</p>
    <p><input class="niceCheck" type="checkbox" name="" value="100">15 millions and above (15)</p>
</form>

And jQuery code:

<script type="text/javascript"> 
    $(document).ready(function() { 
        $('#ckPrice :checkbox').click(function() { 
            var price = 'abc'; 
            $(".niceCheck").each(function() { 
                if ($(".niceCheck").is(":checked")) { 
                    price += $(".niceCheck").value(); 
                } 
            }); 
        alert(price); 
        }); 
     }); 
</script>

The alert function in bottom jQuery code only returns 'abc'. How should I do this?

This is jQuery code: <script type="text/javascript"> $(document).ready(function() { $('#ckPrice :checkbox').click(function() { var price = 'abc'; $(".niceCheck").each(function() { if ($(".niceCheck").is(":checked")) { price += $(".niceCheck").value(); } }); alert(price); }); }); </script> — Killer Whale
– Killer Whale, Commented Jun 24, 2013 at 14:51
input elements shouldn't be wrapped in p elements. Use label instead. Equally your += is going to give an odd result with the values "0-49", "50-99" and "100" - selecting all 3 will give you "0-4950-99100". — James Donnelly
– James Donnelly, Commented Jun 24, 2013 at 14:55
@JamesDonnelly Thank for your great answer. Hi, I want to select values are checked. — Killer Whale
– Killer Whale, Commented Jun 24, 2013 at 15:04

j08691 · Accepted Answer · 2013-06-24 14:51:56Z

5

Change:

if ($(".niceCheck").is(":checked")) {
    price += $(".niceCheck").value();
}

to:

if ($(this).is(":checked")) {
    price += $(this).val();
}

Your .each() call is looping through the elements you want and you need to refer to them via $(this). Also jQuery uses .val() not .value(). Of course, since you have unusual values your end result will be a string with something like "abc50-99100"

jsFiddle example

answered Jun 24, 2013 at 14:51

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tymeJV · Accepted Answer · 2013-06-24 14:55:41Z

1

Your each function should use this

$(".niceCheck").each(function() { 
    if ($(this).is(":checked")) { 
        price += this.value;
    } 
});

answered Jun 24, 2013 at 14:55

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

Edorka · Accepted Answer · 2013-06-24 15:12:08Z

1

You are checking against the first one

 $(".niceCheck").each(function() { 
    var check = $(this);
    if (check.is(":checked")) { 
        price += check.val(); 
    } 
 });
 alert(price);

edited Jun 24, 2013 at 15:12

answered Jun 24, 2013 at 14:52

Edorka

1,81113 silver badges25 bronze badges

3 Comments

Killer Whale Over a year ago

I should do $(this).val(); instead $(".niceCheck").value();, it will doesn't work. Morever, I want to use click event and then use each() method to get all value are checked. Thank for your answer.

Edorka Over a year ago

Sorry, I was about to correct this but had a little problem which needed urgent response.

Killer Whale Over a year ago

No problem! I'm very happy when you fixed your answer and now it works. Thank so much! hi.

Collectives™ on Stack Overflow

jQuery - How to use each() in click event jquery?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related