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

Как использовать 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 не работает. Есть ли хорошее решение?

16 230
html jquery checkbox

16 ответов:

вот тот, который работает (пример):

 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 для этих изменений.

306

вы также можете вернуть все выбранные значения флажков в строке, разделенной запятыми. Это также облегчит вам задачу при отправке его в качестве параметра в 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>
115

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

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

Edit: Ой, ладно.. там вы идете... У вас раньше не было 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());
});

... Я совсем забыл про этот короткий путь. ;)

62

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

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

Спасибо Мохамед Пхукет

43

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

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

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

6

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

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

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

5
   $(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.
           }
        });
    });
3
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
3
$("#t").text($("#cb").find(":checked").val())
2

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

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

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

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

2

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

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

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

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 и отправляю обратно в базу данных с помощью $.получить.(..)

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

2
<html>
<head>
<title>jQuery check / uncheck a check box example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery check / uncheck a check box example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isCheck").click(function () {

    alert($('input:checkbox[name=checkme]').is(':checked'));

    });

    $("#checkIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',true);

    });

    $("#UnCheckIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',false);

    }); 

  });
</script>
</head><body>

<input type="checkbox" name="checkme">Check Me</input>

<br/>
<br/>
<br/>

<input type='button' value='Is Check' id='isCheck'>
<input type='button' value='Check It' id='checkIt'>
<input type='button' value='UnCheck It' id='UnCheckIt'>

</body>
</html>
1

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

 $(".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);
0

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

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