Флажок - что проверено? Jquery

Question

У меня есть этот код:

<input type="checkbox" id="checkbox" value="11">
<input type="checkbox" id="checkbox" value="10">

<div id="log"></div>

$("input").click(function() {
  $("#log").html( $(":checked").val() + " is checked!" );
});

Если я начну с того, что поставлю галочку в первом, то в следующий раз добавлю: 11 отмечен.

Как я могу это сделать, он принимает ВСЕ представленные значения флажков - например: 11,10, проверено.

И можно ли извлечь эти значения с помощью php, чтобы это выглядело так: 10 11 Без ","

UPDATE:

$('input[type="submit"]').click(function() {
    var kolort = $('input[type="checkbox"]:checked').val(); 
    var output = $(this).text() + ", " + kolort;

  /*
  $('input[type="checkbox"]:checked').each(function(index) {
    output += $(this).text() + ", ";
  });*/

  alert(output + "is checked!");
});

Теперь у меня есть это. Хотя, это просто печатает ОДНО из значений, а не оба. Как я могу сделать так, чтобы он брал значения из КАЖДОГО ввода?

Answer 1

Вы можете использовать API jQuery .each():

$('input[type="submit"]').click(function() {
  var output = '';

  $('input[type="checkbox"]:checked').each(function(index) {
    output += $(this).val() + ", ";
  });

  alert(output + "is checked!");
});

Тестовая страница: http://pastebin.com/LVuLUthB

Что касается удаления запятых, при обработке в PHP запятых не будет. Флажки отправляются в виде массива. Что вы хотите сделать, это:

<input type="checkbox" name="checkbox[]" value="11">
<input type="checkbox" name="checkbox[]" value="10">

А потом в PHP:

echo implode(', ', $_POST['checkbox']) . ' are checked!';

Answer 2

1. Два элемента управления не могут иметь одинаковый идентификатор.

2. С учетом исправления # 1 легко использовать .val() и / или обрабатывать возвращенную коллекцию jQuery как упорядоченную последовательность. Поскольку # 1 исправлено, для этого потребуется селектор на основе типа или имени и т. Д.

3. Код в посте не взаимодействует с PHP. Подумайте о пересмотре вопроса / кода. Обратите внимание, что <input type="checkbox" name="choice[]"> (обратите внимание на имя) может быть полезно для обработки на сервере как коллекции.

Удачного кодирования.

Answer 3

Как сказал @zod, вам понадобятся разные идентификаторы на ваших флажках.Кроме того, вам понадобится цикл для обработки всех флажков.Попробуйте это:

var total = ""; $(":checked").each(function(){ if(total != "") total = total + ","; total = total + $(this).val(); }); $("#log").html(total + " is checked!");

Answer 4

.val() всегда будет возвращать значение первого соответствующего элемента: http://api.jquery.com/val/

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

$("input").click(function() {
    $(":checked").each(function() {
        $("#log").html( this.val() + " is checked!" );
    })

});

Answer 5

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

http://www.sitepoint.com/forums/javascript-15/get-value-checkbox-checked-jquery-583619.html

$(function(){
  $('#btnClick').click(function(){
    var val = [];
    $(':checkbox:checked').each(function(i){
      val[i] = $(this).val();
    });
  });
});

и отослать это тоже

http://api.jquery.com/checked-selector/

Answer 6

Взгляните на jQuery .each().Следующее будет проходить по всем установленным флажкам.Как @zod заявляет в своем комментарии, идентификаторы уникальны , вместо этого используйте класс.

$("input").click(function() {
    $(":checked").each(function() {
         $("#log").html($(this).val() + " is checked!");
    });
});