Heim > Web-Frontend > js-Tutorial > Basierend auf jQuery zur Implementierung der Funktionen „Alle auswählen', „Alle abwählen' und „Auswahl umkehren'.

Basierend auf jQuery zur Implementierung der Funktionen „Alle auswählen', „Alle abwählen' und „Auswahl umkehren'.

高洛峰
Freigeben: 2017-02-06 13:17:04
Original
983 Leute haben es durchsucht

Dieser Code ist aus vielen jQuery-Kontrollkästchen-Funktionscodes ausgewählt. Der in meinem Projekt verwendete Code wird hier mit allen geteilt.

jQuery-Code:

        $(function(){ 
            $("#checkedAll").click(function(){ 
                $('[name=items]:checkbox').attr('checked',true); 
            }); 
            $("#checkedNo").click(function(){ 
                $('[name=items]:checkbox').attr('checked',false); 
            }); 
            $("#checkedRev").click(function(){ 
                $('[name=items]:checkbox').each(function(){ 
                    //$(this).attr('checked',!$(this).attr('checked')); 
                    this.checked = !this.checked; 
                }); 
            }); 
            $("#send").click(function(){ 
               var str = "你选中的是:\r\n"; 
               $('[name=items]:checkbox:checked').each(function(){ 
                   str += $(this).val()+"\r\n"; 
               }); 
                alert(str); 
            }); 
        });
Nach dem Login kopieren

HTML-Code:

    你爱好的运动是?<br> 
    <input type="checkbox" name="items" value="足球"/>足球 
    <input type="checkbox" name="items" value="篮球"/>篮球 
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球 
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br> 
    <input type="button" id="checkedAll" value="全 选"/> 
    <input type="button" id="checkedNo" value="全不选"/> 
    <input type="button" id="checkedRev" value="反 选"/> 
    <input type="button" id="send" value="提 交"/>
Nach dem Login kopieren

Leute, ist es sehr praktisch, das zu verwenden? Ich hoffe, es hilft allen .

Weitere Artikel, die auf jQuery basieren und die Funktion „Alle Kontrollkästchen auswählen“, „Keine Auswahl“ und „Umgekehrte Auswahl““ implementieren, finden Sie auf der chinesischen PHP-Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage