Comment récupérer les valeurs des cases à cocher dans jQuery
comment utiliser jQuery pour obtenir les valeurs des cases à cocher vérifiées, et de le mettre dans une textarea immédiatement?
comme CE code:
<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>
si le id="c_d" est mis à jour par Ajax , le ci-dessous du code d'altCognito ne fonctionne pas. Est-il une bonne solution?
16 réponses
En voici un qui fonctionne ( voir l'exemple ):
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals);
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
mise à Jour
un certain nombre de mois plus tard, une autre question a été posée concernant la façon de garder le travail ci-dessus si L'ID change. Eh bien, la solution se résume à mapper la fonction updateTextArea en quelque chose de générique qui utilise les classes CSS, et d'utiliser la fonction live pour surveiller le DOM pour ces changements.
vous pouvez également retourner toutes les valeurs des cases à cocher sélectionnées dans la chaîne de caractères séparée par des virgules. Cela vous facilitera également la tâche lorsque vous l'envoyez en paramètre à SQL
voici un exemple qui renvoie toutes les valeurs de cases à cocher sélectionnées qui ont le nom "chkboxName" dans la chaîne de caractères séparée
et voici le javascript
function showSelectedValues()
{
alert($("input[name=chkboxName]:checked").map(
function () {return this.value;}).get().join(","));
}
Voici L'échantillon 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>
votre question est assez vague mais je pense que c'est ce dont vous avez besoin:
$(function() {
$('input[type="checkbox"]').bind('click',function() {
if($(this).is(':checked')) {
$('#some_textarea').html($(this).val());
}
});
});
Edit: oh, okay.. là vous allez... Vous n'aviez pas le HTML avant. Bref, Ouais, je pensais que tu voulais mettre la valeur dans un textarea quand il est cliqué. Si vous voulez que les valeurs des cases à cocher vérifiées soient insérées dans la textarea (peut-être avec une belle virgule) sur la page de chargement, ce serait aussi simple que:
$(function() {
$('#c_b input[type="checkbox"]:checked').each(function() {
$('#t').append(', '+$(this).val());
});
});
Edit 2 comme les gens l'ont fait, vous pouvez aussi faire ceci pour raccourcir le long sélecteur que j'ai écrit:
$('#c_b :checkbox:checked').each(function() {
$('#t').append(', '+$(this).val());
});
... J'ai totalement oublié que raccourci. ;)
cela fonctionne parfaitement pour moi:
alert($("input[name=chkboxName]:checked").map(function() {
return this.value;
}).get().join(","));
Merci Mohamed ElSheikh
merci altCognito, votre solution a aidé. Nous pouvons également le faire en utilisant le nom des cases à cocher:
function updateTextArea() {
var allVals = [];
$('[name=chkbox]:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
ce qui suit peut être utile puisque je suis arrivé ici à la recherche d'une solution légèrement différente. Mon script avait besoin de passer automatiquement en boucle par les éléments d'entrée et devait retourner leurs valeurs (pour jQuery.post () function), le problème était que les cases à cocher retournaient leurs valeurs indépendamment de l'état vérifié. C'était ma solution:
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();
}
};
Utilisation:
jQuery(".element").input_val();
si le champ d'entrée donné est une case à cocher, la fonction input_val retourne seulement une valeur si ses vérifié. Pour tous les autres éléments, la valeur est retournée indépendamment de l'état vérifié.
Voici une alternative dans le cas où vous avez besoin de sauver la valeur à une variable:
var _t = $('#c_b :checkbox:checked').map(function() {
return $(this).val();
});
$('#t').append(_t.join(','));
(map () retourne un tableau, que je trouve plus pratique que le texte dans 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();
});
de toute façon, vous avez probablement besoin de quelque chose comme ceci:
var val = $('#c_b :checkbox').is(':checked').val();
$('#t').val( val );
la valeur de la première case à cocher cochée sur la page sera inscrite dans le texte avec id='textarea' .
notez que dans votre exemple de code vous devez mettre les cases à cocher dans une forme.
une façon beaucoup plus facile et court-circuitée que j'utilise pour accomplir la même chose, en utilisant la réponse d'un autre post, est comme ceci:
var checkedCities = $('input[name=city]:checked').map(function() {
return this.value;
}).get();
a l'Origine, les villes sont récupérées à partir d'une base de données MySQL, et boucle en PHP boucle 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 } ?>
maintenant, en utilisant le code jQuery ci-dessus, j'obtiens toutes les valeurs city_id, et je renvoie à la base de données en utilisant $.obtenir.(..)
cela a rendu ma vie si facile depuis maintenant le code est entièrement dynamique. Afin d'ajouter plus de villes, tout ce que je dois faire est d'ajouter plus de villes dans ma base de données, et pas de soucis sur PHP ou jQuery end.
<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>
j'ai eu un problème similaire et c'est comment je l'ai résolu en utilisant les exemples ci-dessus:
$(".ms-drop").click(function () {
$(function showSelectedValues() {
alert($(".ms-drop input[type=checkbox]:checked").map(
function () { return this.value; }).get().join(","));
});
});
essayez celui-ci..
var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
console.log($(this).val());
listCheck .push($(this).val());
});
console.log(listCheck);
Si vous voulez insérer la valeur de la case immédiatement, car elle est cochée, cela devrait fonctionner pour vous:
$(":checkbox").click(function(){
$("#id").text(this.value)
})