Implémenter des fonctions telles que la sélection de toutes les cases à cocher, l'inversion des sélections et la désélection de toutes les cases en fonction de jquery

jquery implémente des fonctions telles que tout sélectionner, inverser la sélection et tout désélectionner. Ce qui suit est un exemple. Supposons que la page comporte l'ensemble de cases à cocher suivant et plusieurs boutons associés (sélectionner tout, sélectionner inversement, tout désélectionner, etc.) :

<input type="checkbox" name="fruit" value="apple" />苹果
<input type="checkbox" name="fruit" value="orange" />橘子
<input type="checkbox" name="fruit" value="banana" />香蕉
<input type="checkbox" name="fruit" value="grape" />葡萄
  
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="全不选">
<input type="button" id="btn3" value="反选">
<input type="button" id="btn4" value="选中所有奇数">
<input type="button" id="btn5" value="获得选中的所有值">

sont implémentés respectivement Le code complet des fonctions concernées est le suivant :

$(function(){
  $('#btn1').click(function(){//全选
    $("[name='fruit']").attr('checked','true');
  });
  $('#btn2').click(function(){//全不选
    $("[name='fruit']").removeAttr('checked');
  });
  $('#btn3').click(function(){//反选
    $("[name='fruit']").each(function(){
      if($(this).attr('checked')){
        $(this).removeAttr('checked');
      }else{
        $(this).attr('checked','true');
      }
    })
  });
  $("#btn4").click(function(){//选中所有奇数
    $("[name='fruit']:even").attr('checked','true');
  })
  $("#btn5").click(function(){//获取所有选中的选项的值
    var checkVal='';
    $("[name='fruit'][checked]").each(function(){
      checkVal+=$(this).val()+',';
    })
    alert(checkVal);
  })
});

Notez que le package jquery doit être introduit avant d'utiliser jquery !

Ce qui précède est le code que l'éditeur a travaillé dur pour compiler. Est-il très pratique à utiliser ? J'espère qu'il pourra aider tout le monde.

Pour plus d'articles sur l'implémentation des fonctions de sélection de tout, d'inversion et de désélection de cases basées sur jquery, veuillez faire attention au site Web PHP chinois !