JS / JQuery - Trouble with getting checkbox values

Question

I have many checkboxes in a dynamically produced (ASP) photo gallery. Each checkbox has the name 'photos' and contains a photo ID in the value, like this:

<form name="selectForm" id="selectForm">
<input type="checkbox" onclick="selectPhoto(<%=rs1.Fields("photoID")%>)" id="checkbox_<%=rs1.Fields("photoID")%>" class="photos" name="photos" value="<%=rs1.Fields("photoID")%>">
</form>

Without submitting a form, when the user clicks the checkbox, I need to create a comma (,) separated list of all the checked values for the checkbox named 'photos'. So this is what I tested but it alerts 'undefined'! The ASP is correct, for those not familiar with it.

function selectPhoto(id) {
... other stuff that uses id ...
var allValues = document.selectForm.photos.value;
alert(allValues);
}

But as I said above, this returns 'undefined' and I can work out why. When a user selects a photo, I simply need to display a list of all the photo ID's that have been clicked e.g. 1283,1284,1285,1286...

Any ideas what I am doing wrong here? Or is there another way to achieve this?

Did you put the form tag inside the loop, or just the input tag only ? — David Tran
– David Tran, Commented Oct 9, 2011 at 22:36
Just the input tag. I added the form to present this question :) — TheCarver
– TheCarver, Commented Oct 9, 2011 at 22:37

Jack · Accepted Answer · 2011-10-09 22:42:21Z

2

Try this:

var allValues = [];
$('input.photos').each(function(){
  allValues.push($(this).val());
});

alert(allValues.join(','));

answered Oct 9, 2011 at 22:42

Jack

9,5783 gold badges31 silver badges33 bronze badges

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

3 Comments

TheCarver Over a year ago

It looks like something I need but unfortunately it didn't work. I wish I knew more so I could debug it myself. Any ideas?

TheCarver Over a year ago

Actually, I think my problem lies elsewhere - this may still work :/

TheCarver Over a year ago

I appreciate your suggestion but I couldn't get it to produce the right results. Firstly, it returned all checkbox values for 'photos' but NOT the checked ones. So I altered 'input.photos' to 'input.photos:checked' and it worked but it was conflicting with other checkboxes on my page that have a class of '.photos'. Really weird. Unfortunately, I tried another answer and it worked but would like to thank-you anyway because it wasn't far away at all

David Tran · Accepted Answer · 2011-10-09 22:51:39Z

I believe that the problem comes from the fact that "document.selectForm.photos" is not an input but an array. I have some code for you that worked:

<script>
function selectPhoto(id) {
    var allCheckbox = document.selectForm.photos;
    var allValues = []
    for (var i=0; i<allCheckbox.length; i++){
        if (allCheckbox[i].checked){
            allValues.push(allCheckbox[i].value)
        }
    }
    alert( allValues.join(',') )
}
</script>

<form name="selectForm" id="selectForm">
    <input type="checkbox" onclick="selectPhoto(1)" id="checkbox_1" class="photos" name="photos" value="1">
    <input type="checkbox" onclick="selectPhoto(2)" id="checkbox_2" class="photos" name="photos" value="2">
    <input type="checkbox" onclick="selectPhoto(3)" id="checkbox_3" class="photos" name="photos" value="3">
    <input type="checkbox" onclick="selectPhoto(4)" id="checkbox_4" class="photos" name="photos" value="4">
    <input type="checkbox" onclick="selectPhoto(5)" id="checkbox_5" class="photos" name="photos" value="5">
</form>

Collectives™ on Stack Overflow

JS / JQuery - Trouble with getting checkbox values

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related