Implementieren Sie Funktionen wie das Auswählen aller Kontrollkästchen, das Umkehren von Auswahlen und das Deaktivieren aller Kontrollkästchen basierend auf 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="获得选中的所有值">

werden jeweils implementiert. Der vollständige Code der relevanten 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 das JQuery-Paket vor der Verwendung von JQuery eingeführt werden muss!

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

Weitere verwandte Artikel zum Implementieren der Kontrollkästchenauswahl, der umgekehrten Auswahl und der Deaktivierung aller Elemente basierend auf JQuery finden Sie auf der chinesischen PHP-Website!