Implementieren Sie Funktionen wie das Auswählen aller Kontrollkästchen, das Umkehren von Auswahlen und das Aufheben der Auswahl von keinem auf der Grundlage von jquery_jquery

jquery implementiert Funktionen wie „Alle auswählen“, „Auswahl umkehren“ und „Alle abwählen“. Gehen Sie davon aus, dass die Seite über die folgenden Kontrollkästchen und mehrere zugehörige Schaltflächen verfügt (Alle auswählen, Auswahl umkehren, Auswahl aller aufheben usw.):

<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="获得选中的所有值"> 

Der vollständige Code zur Implementierung der jeweiligen Funktionen lautet wie folgt:

$(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); 
  }) 
}); 

Beachten Sie, dass Sie das JQuery-Paket importieren müssen, bevor Sie JQuery verwenden!

Das Obige ist der Code, an dessen Kompilierung der Editor hart gearbeitet hat. Ich hoffe, dass er allen helfen kann.