JS / jQuery - проблема с получением значений флажков

#javascript #jquery #checkbox

#javascript #jquery #флажок

Вопрос:

У меня много флажков в динамически создаваемой (ASP) фотогалерее. Каждый флажок имеет имя «фотографии» и содержит идентификатор фотографии в значении, например:

 <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>

Без отправки формы, когда пользователь нажимает на флажок, мне нужно создать разделенный запятыми (,) список всех отмеченных значений для флажка с именем «фотографии». Итак, это то, что я тестировал, но оно предупреждает «не определено»! ASP правильный, для тех, кто с ним не знаком.

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

Но, как я уже сказал выше, это возвращает ‘undefined’, и я могу понять, почему. Когда пользователь выбирает фотографию, мне просто нужно отобразить список всех идентификаторов фотографий, на которые были нажаты, например, 1283,1284,1285,1286…

Есть идеи, что я здесь делаю не так? Или есть другой способ добиться этого?

Ответ №1:

Попробуйте это:

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

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

1. Похоже, это то, что мне нужно, но, к сожалению, это не сработало. Хотел бы я знать больше, чтобы я мог отладить это сам. Есть идеи?

2. На самом деле, я думаю, что моя проблема заключается в другом — это все еще может работать :/

3. Я ценю ваше предложение, но я не смог заставить его выдавать правильные результаты. Во-первых, он вернул все значения флажков для «фотографий», но НЕ отмеченные. Поэтому я изменил ‘input.photos’ на ‘input.photos: проверено’, и это сработало, но это противоречило другим флажкам на моей странице, которые имеют класс ‘.photos’. Действительно странно. К сожалению, я попробовал другой ответ, и он сработал, но все равно хотел бы поблагодарить вас, потому что это было совсем недалеко

Ответ №2:

Я считаю, что проблема связана с тем фактом, что « document.selectForm.photos » — это не ввод, а массив. У меня есть для вас код, который сработал:

 <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>