26.jquery全選和全不選
阿新 • • 發佈:2018-02-24
log scrip sel dtd put cti 事件 點擊 move
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <title>Insert title here</title> <script type="text/javascript"> $(function(){ //全選 $("#selAll").click(function(){ //獲取所有復選框,設置checked屬性 $("input[type=‘checkbox‘]").attr("checked","checked"); }); //全不選 $("#selNo").click(function(){ $("input[type=‘checkbox‘]").removeAttr("checked"); }); //在boxId上綁定點擊的事件,判斷當前復選框是否被選中,如果被選中,3個愛好都被選中 $("#boxId").click(function(){ //判斷當前復選框是否被選中 if($(this).attr("checked")=="checked"){ $("input[type=‘checkbox‘]").attr("checked","checked"); }else{ $("input[type=‘checkbox‘]").removeAttr("checked"); } }); //在愛好上綁定事件 $("input[name=‘hobby‘]").click(function(){ //判斷3個愛好被選中的個數 if($("input[name=‘hobby‘]:checked").size()==3){ //全被選中了 $("#boxId").attr("checked","checked"); }else{ $("#boxId").removeAttr("checked"); } }); }); </script> </head> <body> <h3>全選全不選</h3> <input type="checkbox" id="boxId" />全選/全不選<br/> <input type="checkbox" name="hobby" />抽煙<br/> <input type="checkbox" name="hobby" />喝酒<br/> <input type="checkbox" name="hobby" />燙頭<br/> <input type="button" value="全選" id="selAll"/> <input type="button" value="全不選" id="selNo"/> </body> </html>
26.jquery全選和全不選