Как получить значения флажков в jQuery

240

Как использовать jQuery, чтобы получить значения флажков и сразу же поместить их в текстовую область?

Так же, как этот код:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Если Ajaxid="c_d" обновлен , приведенный ниже код altCognito не работает. Есть ли хорошее решение?

jquery html checkbox

— lanqy
источник

Вы хотели все или по одному за раз?

— TStamper

Как мы можем «установить» флажок с заданным значением / меткой? сказать "one_name2"?

— Amitd

5

@Amitd use $ ("input [name = one_name2]"). Attr ('флажок', true);

— Марк Шультхайс

спасибо, что работал хорошо .. даже для радио типа. 1 голос проголосовал :)

— Amitd

320

Вот тот, который работает ( см. Пример ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Обновить

Через несколько месяцев был задан еще один вопрос о том, как сохранить работоспособность вышеуказанного, если идентификатор изменится. Итак, решение сводится к тому, чтобы отобразить функцию updateTextArea в нечто общее, использующее классы CSS, и использовать живую функцию для отслеживания DOM на предмет этих изменений.

— CGP
источник

2

Ах, ха! Превосходно. Вы учли оба вероятных сценария. Хорошая работа, сэр. ;)

— KyleFarris

Как мы можем «установить» флажок с заданным значением / меткой? сказать "one_name2"?

— Amitd

6

Мне нравится использовать map для таких вещей: $ (': checked', '#c_b'). Map (function (i, cb) {return cb.value}) .get (). Кроме того, это всего лишь личные предпочтения, но я бы отделил получение значений от изменения текстовых областей, например: $ (function () {$ ('# c_b input'). Click ($ ('# t'). Val. ($ (': checked', '#c_b'). map (function (i, cb) {return cb.value}) .get ())); $ ('# c_b input: first'). triggerHandler (' нажмите ');});

— Брэндон

используйте $(document).on("click", "#c_b input", updateTextArea);вместо этого, чтобы обойти проблемы ajax'ы.

— Goldentoa11

1

не уверен, что это только в IE (11), но не должно ли это быть $('#c_b:checked')(акцент на расстояние)?

— AceMark

124

Вы также можете вернуть все выбранные значения флажков в строке через запятую. Это также облегчит вам, когда вы отправите его в качестве параметра в SQL

Вот пример, который возвращает все выбранные значения флажков, которые имеют имя "chkboxName" в отдельной строке запятой

А вот и JavaScript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

Вот пример HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

— Мохамед ЭльШейх
источник

Я просто наткнулся на это, когда искал способ получить все значения отмеченных флажков с заданным именем, и это работает для меня с двумя небольшими проблемами. 1) каждый раз, когда я устанавливаю флажок, отличный от первого, он переключает флажок в первом. 2) Когда я пытаюсь установить это в массив, чтобы я мог получить доступ к информации позже, он падает.

— Преподобный Bubbles

3

Это честно лучший ответ. Очень просто. Я бы убрал «функцию» и «предупреждение», так как это смущает некоторых людей, но код простой, хорошо сделанный.

— tmarois

showSelectedValues также работает для декодирования групп переключателей, которые имеют одинаковое имя

— Мэтью Лок

65

Ваш вопрос довольно расплывчатый, но я думаю, что это то, что вам нужно:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Редактировать: О, ладно ... поехали ... У вас не было HTML раньше. В любом случае, да, я думал, что вы хотите поместить значение в текстовое поле, когда на него нажимают. Если вы хотите, чтобы значения отмеченных флажков помещались в текстовую область (возможно, с хорошим разделением запятыми) при загрузке страницы, это было бы так просто:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Редактировать 2 Как люди сделали, вы также можете сделать это, чтобы сократить длинный селектор, который я написал:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... Я полностью забыл об этом ярлыке. ;)

— KyleFarris
источник

50

Это прекрасно работает для меня:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

Спасибо Мохамед ЭльШейх

— Nic
источник

1

крутой человек ... это единственный, который работал для моего цикла AJAX;) спасибо

— Sagive SEO

7

также может $ ('input [name = selection]: флажок'). map (function () {return this.value;}). toArray ()

— ygaradon

8

Спасибо altCognito, ваше решение помогло. Мы также можем сделать это, используя имя флажков:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

— Harpreet Bhatia
источник

6

Следующее может быть полезно, так как я попал сюда в поисках немного другого решения. Мой сценарий должен был автоматически проходить по элементам ввода и возвращать их значения (для функции jQuery.post ()), проблема была в том, что флажки возвращали свои значения независимо от проверенного состояния. Это было мое решение:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Использование:

jQuery(".element").input_val();

Если данное поле ввода является флажком, функция input_val возвращает значение, только если оно отмечено. Для всех остальных элементов значение возвращается независимо от проверенного состояния.

— Энди
источник

это действительно работает, спасибо большое ... Я только что изменил "return jQuery (this) .val ();" «вернуть истину»; потому что это флажок в моем случае, мне просто нужно знать, если он установлен или нет .. спасибо!

— TCB13,

5

Вот альтернативный вариант, если вам нужно сохранить значение в переменной:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () возвращает массив, который я считаю более удобным, чем текст в textarea).

— pgcd
источник

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

Вы слишком сильно это усложнили. Кроме того, вы обычно не устанавливаете значение текстовой области с помощью параметра value - значение текстового поля - это innerHTML. И если вам нужно установить значение какого-либо элемента, обычно лучше использовать метод val () для целей абстракции браузера.

— KyleFarris

3

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

— Сатору
источник

2

$("#t").text($("#cb").find(":checked").val())

— mkoryak
источник

1

Несколько флажков могут быть отмечены одновременно.

— KyleFarris

2

В любом случае, вам, вероятно, нужно что-то вроде этого:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Это получит значение первого установленного флажка на странице и вставит его в текстовое поле с помощью id='textarea'.

Обратите внимание, что в вашем примере кода вы должны поставить флажки в форме.

— Пим Ягер
источник

2

Это неправильно, isвозвращает логическое значение, логическое значение не имеет valметода.

— не определено

2

Гораздо более простой и короткий способ, которым я пользуюсь, используя ответ из другого поста, выглядит следующим образом:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

Первоначально города извлекаются из базы данных MySQL и зацикливаются в цикле PHP:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Теперь, используя приведенный выше код jQuery, я получаю все значения city_id и отправляю обратно в базу данных, используя $ .get (...)

Это сделало мою жизнь проще, так как теперь код полностью динамический. Чтобы добавить больше городов, все, что мне нужно сделать, это добавить больше городов в мою базу данных, и не нужно беспокоиться о конце PHP или jQuery.

— Zeeshan
источник

0

У меня была похожая проблема, и вот как я решил ее, используя примеры выше:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

— Сэм
источник

0

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

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

— sonida
источник

0

Если вы хотите сразу ввести значение любого флажка во время его проверки, это должно работать для вас:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

— duckyflip
источник

Не учитывает множественные значения и снятые флажки

— Роб