Réponses:
Pour obtenir la valeur de l'attribut Value, vous pouvez faire quelque chose comme ceci:
$("input[type='checkbox']").val();
Ou si vous avez défini un class
ou id
pour cela, vous pouvez:
$('#check_id').val();
$('.check_class').val();
Cependant, cela renverra la même valeur, qu'elle soit cochée ou non, cela peut être déroutant car il est différent du comportement du formulaire soumis.
Pour vérifier s'il est vérifié ou non, procédez comme suit:
if ($('#check_id').is(":checked"))
{
// it is checked
}
$($0).val()
dans Chrome et décochez la case, la réponse est "on" même si elle n'est pas cochée. Mais $($0).is(":checked")
renvoie la bonne valeur.
[type="checkbox"]
a de meilleures performances que dans les navigateurs modernes :checkbox
.
$('#check_id').val();
pour $('#check_id').is(":checked");
renvoyer la valeur true ou false.
Ces 2 façons fonctionnent:
$('#checkbox').prop('checked')
$('#checkbox').is(':checked')
(merci @mgsloan)$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />
Essayez cette petite solution:
$("#some_id").attr("checked") ? 1 : 0;
ou
$("#some_id").attr("checked") || 0;
Les seules façons correctes de récupérer la valeur d'une case à cocher sont les suivantes
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
comme expliqué dans les documentations officielles sur le site Web de jQuery. Le reste des méthodes n'a rien à voir avec la propriété de la case à cocher, ils vérifient l'attribut, ce qui signifie qu'ils testent l'état initial de la case à cocher lors de son chargement. Bref:
elem.checked
) ou vous pouvez l'utiliser $(elem).prop("checked")
si vous voulez vous fier à jQuery.$(elem).is(":checked")
.Les réponses sont trompeuses, veuillez vérifier ci-dessous vous-même:
.is(":checked")
et .prop(":checked")
fonctionnent de la même manière pour moi avec jQuery 1.10.0
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
jQuery(".checkboxClass").click(function(){
var selectedCountry = new Array();
var n = jQuery(".checkboxClass:checked").length;
if (n > 0){
jQuery(".checkboxClass:checked").each(function(){
selectedCountry.push($(this).val());
});
}
alert(selectedCountry);
});
Simple mais efficace et suppose que vous savez que la case à cocher sera trouvée:
$("#some_id")[0].checked;
Donne true
/false
//By each()
var testval = [];
$('.hobbies_class:checked').each(function() {
testval.push($(this).val());
});
//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");
//HTML Code
<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket
<input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
Exemple de
démonstration
Malgré le fait que cette question demande une solution jQuery, voici une réponse JavaScript pure puisque personne ne l'a mentionnée.
Sélectionnez simplement l'élément et accédez à la checked
propriété (qui renvoie un booléen).
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);
<input type="checkbox"/>
Voici un exemple rapide en écoutant l' change
événement:
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
alert(this.checked);
});
<input type="checkbox"/>
Pour sélectionner les éléments cochés, utilisez la :checked
pseudo-classe ( input[type="checkbox"]:checked
).
Voici un exemple qui itère sur les input
éléments vérifiés et renvoie un tableau mappé des noms des éléments vérifiés.
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
checked
propriété est facilement accessible sur l'élément DOM natif. Certaines personnes qui recherchent des questions / réponses comme celles-ci ne savent généralement pas que jQuery n'est pas parfois nécessaire. En d'autres termes, les personnes bornées ne sont pas la cible démographique pour cette réponse.
Voici comment obtenir la valeur de toutes les cases à cocher en tant que tableau:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
pour obtenir la valeur de checkboxex cochée dans jquery
:
var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.
for(var i=0; i<checks.length; i++){
console.log($(checks[i]).val()); // or do what you want
});
dans pure js
:
var checks = document.querySelectorAll("input[type='checkbox']:checked");
for(var i=0; i<checks.length; i++){
console.log(checks[i].value); // or do what you want
});
Utilisez le code suivant:
$('input[name^=CheckBoxInput]').val();
$('.class[value=3]').prop('checked', true);
Le meilleur moyen est $('input[name="line"]:checked').val()
Et vous pouvez également obtenir le texte sélectionné $('input[name="line"]:checked').text()
Ajoutez un attribut de valeur et un nom à vos entrées de bouton radio. Assurez-vous que toutes les entrées ont le même attribut de nom.
<div class="col-8 m-radio-inline">
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="1" checked> Value Text 1
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="2"> Value Text 2
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="3"> Value Text 3
</label>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.laravel').click(function(){
var val = $(this).is(":checked");
$('#category').submit();
});
});
<form action="{{route('directory')}}" method="post" id="category">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input name="category" value="{{$name->id}}" class="laravel" type="checkbox">{{$name->name}}
</form>
Juste attention, à compter d'aujourd'hui 2018, en raison de l'évolution de l'API au fil des ans. removeAttr sont privés, ne fonctionnent plus!
Jquery Cochez ou décochez une case:
Mauvais, ne fonctionne plus.
$('#add_user_certificate_checkbox').removeAttr("checked");
$('#add_user_certificate_checkbox').attr("checked","checked");
Au lieu de cela, vous devriez faire:
$('#add_user_certificate_checkbox').prop('checked', true);
$('#add_user_certificate_checkbox').prop('checked', false);
$("input:checkbox")
. De plus, il semble y avoir une faute de frappe dans le sélecteur de classe ...