In diesem Artikel geht es um Kontrollkästchen, die zwei Formen haben: 1. Alle auswählen und die Auswahl umkehren werden durch 2 Schaltflächen implementiert. 2. Alle auswählen und die Auswahl umkehren werden durch eine Schaltfläche implementiert.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>复选框demo</title> <script src="../js/jquery-1.10.2.js" type="text/javascript"></script> <style> body{ text-align:center} .con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;} </style> </head> <body> <p class="con"> <span><input type='checkbox' name='select' onclick='allSelect()'>全选</span> <span><input type='checkbox' name='cancel' onclick='unAllSelect()'>反选</span> <span><input type='checkbox' name='fruit' />苹果</span> <span><input type='checkbox' name='fruit' />香蕉</span> <span><input type='checkbox' name='fruit' />梨子</span> <span><input type='checkbox' name='fruit' />桃子</span> <span><input type='checkbox' name='fruit' />西瓜</span> <br><br><br> <span><input type='checkbox' id="allBook" name='allBook' />全选</span> <span><input type='checkbox' name='book' />老子</span> <span><input type='checkbox' name='book' />尚书</span> <span><input type='checkbox' name='book' />周易</span> <span><input type='checkbox' name='book' />诗经</span> <span><input type='checkbox' name='book' />孟子</span> <span><input type='checkbox' name='book' />中庸</span> <script type="text/javascript"> //全选 function allSelect(){ $("input[name='fruit']").prop("checked", "checked"); $("input[name='cancel']").removeAttr("checked"); } //反选 function unAllSelect(){ $("input[name='fruit']").removeAttr("checked"); $("input[name='select']").removeAttr("checked"); } //单选 $("#allBook").click(function(){ if(this.checked){// $("input[name='book']").attr("checked", true); $("input[name='book']").prop("checked", "checked"); }else{// $("input[name='book']").attr("checked", false); $("input[name='book']").removeAttr("checked"); } });</script> </p> </body> </html>
Ich bin in der Praxis auf ein Problem gestoßen – bei der Prüfung konnten nicht alle ausgewählt werden. Die Lösung besteht darin, die Prop-Methode anstelle von Attr zu verwenden.
$("input[name='book']").attr("checked", "checked"); $("input[name='book']").prop("checked", "checked");
Dies hängt möglicherweise mit der jQuery-Version zusammen.
Das obige ist der detaillierte Inhalt vonSo wählen Sie alle Kontrollkästchen in js aus und invertieren sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!