Как получить значения флажков в 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
источник

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

Роб

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

Ответы:

Обновить