全選和反選事件
阿新 • • 發佈:2018-11-07
全選和反選事件
<input type="checkbox" name="checkAll"/>全選<br> <input type="checkbox" name="fx"/>反選<br> <input type="checkbox" name="cl"/>JS <input type="checkbox" name="cl"/>JAVA <input type="checkbox" name="cl"/>c# <input type="checkbox" name="cl"/>vb <script type="text/javascript"> // 給全選複選框繫結事件 var checkAll = document.getElementsByName("checkAll")[0]; var cls = document.getElementsByName("cl"); var fx = document.getElementsByName("fx")[0]; checkAll.onclick=function(){ for(var i=0,len=cls.length;i<len;i++){ cls[i].checked=this.checked; } } fx.onclick=function(){ for(var i=0,len=cls.length;i<len;i++){ cls[i].checked=!cls[i].checked; } } for(var i=0,len=cls.length;i<len;i++){ cls[i].onclick=function(){ var checkCount=0; for(var j=0,len=cls.length;j<len;j++){ if(cls[j].checked){ checkCount++; console.log(checkCount) } } if(checkCount===cls.length){ checkAll.checked=true; }else{ checkAll.checked=false; } } } </script>
全選事件:點選全選,四個選項的checked
屬性等於全選的checked屬性。
反選事件:點選反選,四個選項的checked
屬性取反。
四個選項:點選四個選項,當全部的checked
屬性為true時,全選的checked的屬性也為
true,反之相反。