Take value for each check box if checked Javascript

Question

I still learning javascript, i think this is ez question, but i can't fix it with my experience (already try search some source), this my code

This is example:

PHP

<?php
    <input type="checkbox" checked="checked" value="1" class="box_1">1</label> // checked
    <input type="checkbox" value="2" class="box_1">2</label> //unchecked
    <input type="checkbox" checked="checked" value="3" class="box_1">3</label> // checked
    <input type="checkbox" value="4" class="box_1">4</label> //unchecked
    <input type="checkbox" checked="checked" value="5" class="box_1">5</label> // checked

<input type="button" value="Submit" id="button-price" class="button" />
?>

I try check the check box with javasript by class, (i can't use by name&id because i use looping)

I try build condition like this Javascript :

$('#button-price').bind('click', function() {
    var box = '';
    $(".box_1").each(function(){      // for each checkbox in class box_1(1-5)
        if(this).attr("checked","true"){  // if this checked box is true
            var value = (this.value).toLowerCase();  // take the value 
            box = box + value;   // store to box
        }
    });
});

when click button then take value and store to box, I know there error in here if(this).attr("checked","true"){ what it should be writing the condition?

@RayonDabre Thx a lot, i didn't think the code only like that — Newbi, Apr 14 '16 at 06:59
You could also use the [`:checked`](https://api.jquery.com/checked-selector/) selector, ie. `$(".box_1:checked").each(function(){...` — Sean, Apr 14 '16 at 07:07
@Sean I already thinking condition like that, but can't write in javascript :( — Newbi, Apr 14 '16 at 07:09
here is `$(".box_1:checked")` in action -> https://jsfiddle.net/xgqnssqk/ (note, I used `.on('click'` instead of `.bind('click'` as from the docs for [`.bind()`](http://api.jquery.com/bind/) *As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.*) — Sean, Apr 14 '16 at 07:16
@Sean I can build the condition but hard write in js (only have a little experience in js), btw thx so much for your explain & example. :D — Newbi, Apr 14 '16 at 07:20

Mihai Matei · Answer 1 · 2016-04-14T07:29:24.233

0

You can use the jQuery .prop() method to check the checkbox state:

if ($(this).prop("checked")) { // if this checked box is true
    box += $(this).val().toLowerCase(); // store to box
}

Suggestion: (this.value).toLowerCase() will work but try not mixing up jQuery code with pure javascript. Instead of it you can use the solution above.

edited Apr 14 '16 at 07:29

answered Apr 14 '16 at 06:59

Mihai Matei

24,166
5
32
50

1

Is `var value = (this.value).toLowerCase();` wrong ? If yes.. specify so.. If _No_, highlight it as a suggestion... – Rayon Apr 14 '16 at 07:01
__try not mixing up jQuery code with pure javascript__ ? I will strongly _disagree_.. `jQ` is `JavaScript` itself.. – Rayon Apr 14 '16 at 07:05
why? then what's the purpose of using jQuery? – Mihai Matei Apr 14 '16 at 07:06
You are making things worse.. I am expecting a reply over this.. Give me advantage of using `$(this).val().toLowerCase();` over `this.value.toLowerCase();`.. – Rayon Apr 14 '16 at 07:07
1

In this particular situation there is no advantage in using the jQuery solution instead of the `this.value` one. But there are some other advantages which were presented [here](http://stackoverflow.com/questions/7322078/jqueryid-val-vs-getelementbyidid-value) when using it in other situations. I just gave a suggestion on how to write code when using jQuery (from my point of view) – Mihai Matei Apr 14 '16 at 07:17
In `.each`, `error` will never occur.. And as mentioned in earlier comment. the word `suggestion` is missing! _No hard feelings mate!_ – Rayon Apr 14 '16 at 07:24

score 0 · Answer 2 · answered Apr 14 '16 at 07:00

0

Try using prop instead of attr

if($(this).prop('checked')) {
}

Hope this helps.

answered Apr 14 '16 at 07:00

Mubashar Abbas

5,536
4
38
49

Take value for each check box if checked Javascript

2 Answers2