PDA

View Full Version : Resolved Get ids of checked checkboxes



qwikad.com
09-06-2015, 01:12 AM
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
09-06-2015, 06:57 AM
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
09-06-2015, 11:57 AM
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
09-07-2015, 01:08 AM
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!