Get ids of checked checkboxes

[qwikad.com]

I figured out how to show them as an alert, but I would like to list them below the checkboxes:

http://jsfiddle.net/UqrYJ/203/


<input type="checkbox" id="1"> <label>First</label><br>
<input type="checkbox" id="2"> <label>Second</label><br>
<input type="checkbox" id="3"> <label>Third</label><br>
<input type="checkbox" id="4"> <label>Forth</label>


$("input:checkbox").change(function() {
var someObj = {};
someObj.showid = [];
$("input:checkbox").each(function() {
if ($(this).is(":checked")) {
someObj.showid.push($(this).attr("id"));
}
});
alert(someObj.showid);
});

[Beverleyh]

I would like to list them below the checkboxes

Not sure what you're trying to do but you can display the content/value of an attribute with CSS.

Something like;



input[type='checkbox']:before { content:attr(id); display:block; margin-top:10em }

Or



input[type='checkbox']:checked:before { content:attr(id); display:block; margin-top:10em }

[molendijk]

Something like this:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<input type="checkbox" id="1" onclick="$('#checked1').empty(); if(this.checked==true){$('#checked1').append('Checked: '+this.id+'<br>')}">First<br>
<input type="checkbox" id="2" onclick="$('#checked2').empty(); if(this.checked==true){$('#checked2').append('Checked: '+this.id+'<br>')}">Second<br>
<input type="checkbox" id="3" onclick="$('#checked3').empty(); if(this.checked==true){$('#checked3').append('Checked: '+this.id+'<br>')}">Third<br>
<input type="checkbox" id="4" onclick="$('#checked4').empty(); if(this.checked==true){$('#checked4').append('Checked: '+this.id+'<br>')}">Fourth<br>
<div id="checked1"></div>
<div id="checked2"></div>
<div id="checked3"></div>
<div id="checked4"></div>
Bla bla

(This does not require the jquery function of your first post).

[qwikad.com]

Something like this:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<input type="checkbox" id="1" onclick="$('#checked1').empty(); if(this.checked==true){$('#checked1').append('Checked: '+this.id+'<br>')}">First<br>
<input type="checkbox" id="2" onclick="$('#checked2').empty(); if(this.checked==true){$('#checked2').append('Checked: '+this.id+'<br>')}">Second<br>
<input type="checkbox" id="3" onclick="$('#checked3').empty(); if(this.checked==true){$('#checked3').append('Checked: '+this.id+'<br>')}">Third<br>
<input type="checkbox" id="4" onclick="$('#checked4').empty(); if(this.checked==true){$('#checked4').append('Checked: '+this.id+'<br>')}">Fourth<br>
<div id="checked1"></div>
<div id="checked2"></div>
<div id="checked3"></div>
<div id="checked4"></div>
Bla bla

(This does not require the jquery function of your first post).

That's what I was looking for!