J'ai donc une liste de cases à cocher comme
var show = $(this),
colllect = (input.attr("checked") || "") === "checked";
return (colllect !== input.attr("checked"));
Je dois vérifier quelles cases ont été modifiées (cochées => décochées, décochées => cochées) et collecter ces valeurs.
Je me suis arrêté à ce stade maintenant:
var collectID = [];
$.each($("input[class='inv_doc_ids[]']:checked"), function () {
collectID.push($(this).val());
});
console.log(collectID);
Il ne collecte que les cases à cocher cochées et renvoie leurs valeurs dans array => [01000290056001, 01000290056002 , 01000290056003]
Que dois-je ajouter pour que cela fonctionne correctement? J'ai pensé à ajouter quelque chose comme ceci:
<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056001"> <input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056002"> <input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056003">
Mais je ne sais pas si c'est la bonne manière.
4 Réponses :
Vous pouvez sélectionner ceux qui ont un attribut vérifié qui ne le sont pas et ceux qui n'ont pas d'attribut vérifié qui sont vérifiés.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056001"> <input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056002"> <input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056003"> <br> <input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056004"> <input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056005"> <input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056006"> <br> <button>Check</button>
$('button').on('click', e => {
console.log(
$('input[checked]:not(:checked), input:not([checked]):checked')
.map( ( _, it ) => [[ it.value, it.checked ? 1 : 0 ]] )
.get()
);
});
Hé! Merci beaucoup pour votre aide, cela fonctionne comme je m'y attendais. 1 autre question, y a-t-il un moyen de passer 1 valeur de plus en fonction de son statut coché / non coché? Comme: si coché => non coché, alors le tableau serait [valeur, 0] , si non coché => coché, alors le tableau serait [valeur, 1] . Est-ce possible?
.map ((_, it) => [it.value, it.checked? 1: 0]) devrait faire l'affaire @Marshmello
Oui! Merci! Et la dernière question. J'utilise RoR à l'arrière / à l'avant. Quand je passe des valeurs, je reçois 1 tableau => [valeur, 0, valeur, valeur, 0] . Comment le passer correctement de js pour faire smth comme ceci => [[valeur, 0], [valeur, 0]] ? J'ai un peu "mis à jour" le script de mon côté, en utilisant la fonction "push" maintenant, pour transmettre toutes les valeurs: pastebin.com/bUk50fTi JS pas mon côté fort, alors merci pour votre aide!
@Marshmello a mis à jour la réponse pour renvoyer le tableau de tableaux.
Vous pouvez utiliser un écouteur d'événements pour gérer le déclenchement de l'événement de changement de case à cocher. Ajoutez ensuite ces valeurs à un tableau lorsque vous cliquez sur la case à cocher.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056001"> <input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056002"> <input class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056003"> <button id="btn1" >Show modified values</button>
// array to hold modified checkbox values
var checkboxes = [];
// event listener on change
$('input[type=checkbox]').on('change', function(){
checkboxes.push($(this).val());
});
// log values to console
$('#btn1').on('click', function(){
console.log(checkboxes);
});
PS: je vous conseille d'avoir des identifiants différents pour chaque case à cocher. Les identifiants HTML sont censés être uniques.
addEventListener pour savoir lequel est modifié.?
document.querySelectorAll('input[type=checkbox]').forEach(function(item){
item.addEventListener('change', function(){
console.log(item.value);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056001"> <input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056002"> <input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056003"> <input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056004"> <input class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056005"> <input checked class="inv_doc_ids[]" name="inv_doc_ids[]" type="checkbox" value="01000290056006"> <button>Check</button>
$('button').on('click', function() {
var valuelist = [];
$("input[type=checkbox]").each(function() {
var dom_checked = $(this).attr('checked');
var checked = $(this).prop('checked');
if ((dom_checked === "checked" && checked === false) ||
typeof dom_checked === "undefined" && checked === true) {
valuelist.push(this.value);
}
})
console.log(valuelist);
})
Donc, pour être clair, vous voulez savoir quelles cases à cocher ont été modifiées par rapport à leurs valeurs lorsque la page a été chargée - est-ce exact?
attr ('checked')! == undefinedvous dirait s'il avait l'attribut sur l'élément dans la source d'originePremier problème. Vous utilisez le même identifiant plusieurs fois ...
@RoryMcCrossan Oui, vous avez raison. La page a été chargée => Vous cochez / décochez les cases et obtenez les valeurs des cases à cocher qui ont été modifiées.