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

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

235 голосов
/ 24 апреля 2009

Как использовать 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>

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

Ответы [ 15 ]

313 голосов
/ 24 апреля 2009

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

 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, и использовать функцию live для мониторинга DOM на предмет этих изменений.

119 голосов
/ 25 мая 2011

Вы также можете вернуть все выбранные значения флажков в строке через запятую. Это также облегчит вам отправку в качестве параметра в 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>
63 голосов
/ 24 апреля 2009

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

$(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());
});

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

48 голосов
/ 16 мая 2012

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

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

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

8 голосов
/ 11 июня 2010

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

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});
6 голосов
/ 28 декабря 2010

Следующее может быть полезно, так как я попал сюда в поисках немного другого решения. Мой сценарий должен был автоматически проходить по элементам ввода и возвращать их значения (для функции 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 возвращает значение, только если оно установлено. Для всех остальных элементов значение возвращается независимо от проверенного состояния.

5 голосов
/ 04 апреля 2012

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

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

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

3 голосов
/ 04 марта 2011 
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
3 голосов
/ 24 апреля 2009 
   $(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.
           }
        });
    });
2 голосов
/ 10 января 2014

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

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

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

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.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...