Maison  >  Article  >  interface Web  >  Exemples de cases à cocher opérationnelles jQuery pour implémenter plusieurs sélections et désélections

Exemples de cases à cocher opérationnelles jQuery pour implémenter plusieurs sélections et désélections

黄舟
黄舟original
2018-05-15 13:49:553646parcourir

Dans un article précédent, nous vous avons présenté une explication détaillée de la méthode jQuery de fonctionnement des cases à cocher. Maintenant que nous avons compris la méthode des cases à cocher, comment utiliser la case à cocher pour réaliser des sélections multiples ? Aujourd'hui, nous allons vous présenter un exemple d'utilisation de jQuery pour utiliser une case à cocher afin de réaliser plusieurs sélections et désélections !

Jetons d'abord un coup d'oeil aux rendus :

<html>
<head>
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        function check() {
            var code = "";
            //$("input[name=chkname][value=AAAAA],[value=BBBBB]").attr("checked", true);//固有属性
            $("input[name=chkname][value=AAAAA],[value=BBBBB]").prop("checked", true);//自定义的DOM属性
        }
        function clearcheck() {
            $("input[name=chkname]").removeAttr("checked");
        }
    </script>
</head>
<body>
    <input type="checkbox" value="AAAAA" name="chkname" />AAAAA
    <input type="checkbox" value="BBBBB" name="chkname" />BBBBB
    <input type="checkbox" value="CCCCC" name="chkname" />CCCCC
    <input type="checkbox" value="DDDDD" name="chkname" />DDDDD
    <br />
    <input id="btnCheck" type="button" value="选中[value=AAAAA],[value=BBBBB]" onclick="check()" />
    <input id="btnClear" type="button" value="取消选中" onclick="clearcheck()" />
    <br />
  
<pre class="brush:php;toolbar:false">
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
如果在ajax加载方式,attr无效时就使用prop。

<html>
<head>
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<script>
function check() {
var code = "";
$("input[name=chkname][value=AAAAA],[value=BBBBB]").attr("checked", true);
}
function clearcheck() {
$("input[name=chkname]").removeAttr("checked");
}
</script>
</head>
<body>
<input type="checkbox" value="AAAAA" name="chkname" />AAAAA
<input type="checkbox" value="BBBBB" name="chkname" />BBBBB
<input type="checkbox" value="CCCCC" name="chkname" />CCCCC
<input type="checkbox" value="DDDDD" name="chkname" />DDDDD
<br />
<input id="btnCheck" type="button" value="选中[value=AAAAA],[value=BBBBB]" onclick="check()" />
<input id="btnClear" type="button" value="取消选中" onclick="clearcheck()" />
</body>
</html>

Résumé :

Cet article utilise l'effet du code graphique pour vous montrer un exemple de case à cocher fonctionnant avec jQuery pour réaliser plusieurs sélections et désélections. À cet égard, les amis ont une meilleure compréhension des cases à cocher pour réaliser des sélections multiples. votre travail.

Recommandations associées :

Exemple détaillé de la méthode jQuery pour faire fonctionner CheckBox

Méthode JQuery en un clic pour contrôler la sélection des cases à cocher, la sélection inverse et la désélection

Comment obtenir les éléments sélectionnés dans le case à cocher dans js Valeurs multiples

la case à cocher implémente le clic l'événement déclenche le changement de contenu de l'élément span

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Comment utiliser l'API JQueryArticle suivant:Comment utiliser l'API JQuery