Как использовать 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 не работает. Есть ли хорошее решение?
Здесь один, который работает (см. пример):
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals);
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
Некоторое число месяцев спустя был задан другой вопрос относительно того, как сохранить вышеописанное, если ID изменится. Ну, решение сводится к отображению функции updateTextArea во что-то общее, которое использует классы CSS, и использовать функцию live для мониторинга DOM для этих изменений.
Вы также можете вернуть все выбранные значения флажков в строку, разделенную запятыми. Это также облегчит вам, когда вы отправите его как параметр 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>
Ваш вопрос довольно расплывчатый, но я думаю, что это то, что вам нужно:
$(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());
});
... Я полностью забыл об этом ярлыке.;)
Это отлично работает для меня:
alert($("input[name=chkboxName]:checked").map(function() {
return this.value;
}).get().join(","));
Спасибо Мохамед Эль Шейх
Спасибо altCognito, ваше решение помогло. Мы также можем сделать это, используя имя флажков:
function updateTextArea() {
var allVals = [];
$('[name=chkbox]:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
Следующее может быть полезно, так как я получил здесь немного другое решение. Мой script должен был автоматически циклически вводить элементы ввода и должен был возвращать свои значения (для функции 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 возвращает только значение, если оно отмечено. Для всех остальных элементов значение возвращается независимо от выбранного состояния.
Здесь альтернатива, если вам нужно сохранить значение переменной:
var _t = $('#c_b :checkbox:checked').map(function() {
return $(this).val();
});
$('#t').append(_t.join(','));
(map() возвращает массив, который я нахожу более удобным, чем текст в textarea).
$(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.
}
});
});
function updateTextArea() {
var allVals = $('#c_b :checked').map(function() {
return $(this).val();
}).get();
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
$("#t").text($("#cb").find(":checked").val())
В любом случае вам, вероятно, понадобится что-то вроде этого:
var val = $('#c_b :checkbox').is(':checked').val();
$('#t').val( val );
При этом будет отображаться значение первого флажка на странице и вставить его в текстовое поле с помощью id='textarea'.
Обратите внимание, что в вашем примере кода вы должны поместить флажки в форму.
Более простой и короткий путь, который я использую, чтобы выполнить то же самое, используя ответ из другого сообщения, выглядит следующим образом:
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.
<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>
Если вы хотите сразу же вставить значение любого флажка, так как это ebing ckecked, то это должно сработать для вас
$(":checkbox").click(function(){
$("#id").text(this.value)
})
У меня была аналогичная проблема, и именно так я решил ее с помощью приведенных выше примеров:
$(".ms-drop").click(function () {
$(function showSelectedValues() {
alert($(".ms-drop input[type=checkbox]:checked").map(
function () { return this.value; }).get().join(","));
});
});
Попробуйте это.
var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
console.log($(this).val());
listCheck .push($(this).val());
});
console.log(listCheck);