See checkbox value when checked

Question

If i have a list of checkboxes and they have the same name and different values. I want to write the value from the checkboxes i have checked in a new column in real-time. How can i do this ?

<div id="checkboxes">
<input type="checkbox" name="prod" value="Option 1" checked="checked" />Option 1
<input type="checkbox" name="prod" value="Option 2" />Option 2
<input type="checkbox" name="prod" value="Option 3" />Option 3
<input type="checkbox" name="prod" value="Option 4" checked="checked" />Option 4
</div>

Result:

Option 1
Option 4

do you understand how stackoverflow works ? You post a question, many answers occur and you have to validate one. — Nicolas Albert, Sep 24 '14 at 10:21

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

you can listen for click/change events on your inputs - see this : Catch checked change event of a checkbox

And then use jquery's val() function to get the value

edited May 23 '17 at 12:13

Community

1
1

answered Sep 24 '14 at 07:56

sooks

688
1
8
20

Nicolas Albert · Accepted Answer · 2014-09-24T09:30:43.530

0

I suggest you to use jQuery. Here a live sample that can inspire you:

$("#checkboxes input").click(function () {
  $("#output").text($("#checkboxes input:checked").map(function () {
    return $(this).val();
  }).get().join());
}).click().click();

// or
// var updateOutput = function() {
//  $("#output").text($("#checkboxes input:checked").map(function () {
//    return $(this).val();
//  }).get().join());
//};
//$("#checkboxes input").click(updateOutput);
//updateOutput();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkboxes">
<input type="checkbox" name="prod" value="Option 1" checked="checked" />Option 1
<input type="checkbox" name="prod" value="Option 2" />Option 2
<input type="checkbox" name="prod" value="Option 3" />Option 3
<input type="checkbox" name="prod" value="Option 4" checked="checked" />Option 4
</div>
<div id="output"></div>

2 JS options :

double click
use an external function (in comment)

edited Sep 24 '14 at 09:30

answered Sep 24 '14 at 07:56

Nicolas Albert

2,586
1
16
16

thanks, this was what i was looking fore. A question thou. Why is all my checkboxes checked? i have deleted checked="checked" in the input. – patrikc Sep 24 '14 at 09:10
If the answer is good, you can validate it. For your another question, where did you delete checked attributes, in HTML ? with JS ? – Nicolas Albert Sep 24 '14 at 09:12
i was delete the checked="checked" in the HTML. So no one is checked. So only the click is sent to output. – patrikc Sep 24 '14 at 09:18
I don't understand. There is no `checked` attributes and all your checkbox are `checked` at loading ? – Nicolas Albert Sep 24 '14 at 09:19
yes, if i remove all Checked="checked" from the HTML-checkboxes with value Option 1 and Option 4, all become checked when loaded. – patrikc Sep 24 '14 at 09:24
Ok, you right. It's because I click() once to execute the code once. I'll propose a fix. – Nicolas Albert Sep 24 '14 at 09:26
Good, you can validate the answer now! – Nicolas Albert Sep 24 '14 at 09:38

score 0 · Answer 3 · answered Sep 24 '14 at 08:22

var x = new Array();

$('input[name="prod"]').each(function(index){

    if($(this).is(':checked')){

        x[index] = $(this).val();

    }

});

console.log(x[0]); // gives option 1 console.log(x[1]); // gives option 4

x is an array that contains the checked value which you may use as per your wish!! :)

See checkbox value when checked

3 Answers3