- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <h1>你的呢(ne)愛好很廣泛!!</h1>
- <br>
- <input type="checkbox" name="checkItems" id="checkItems" value="全選/全不選">全選/全不選
- <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="唱歌(gē)">唱歌(gē)
- <br>
- <input type="button" name="checkall" id="checkall" value="全選">
- <input type="button" name="checkall" id="checkNo" value="全不選">
- <input type="button" name="checkall" id="checkReverse" value="反選">
- <script type="text/javascript">
- // 處理全選
- document.getElementById('checkall').onclick=function(){
- /*************************************************/
- // 獲取所有的複選框
- var checkElements=document.getElementsByName('items');
- for(var i=0;i<checkElements.length;i++){
- var checkElement=checkElements[i];
- // 方法一(yī)
- // checkElement.setAttribute('checked',' checked');
- // 方法二
- checkElement.checked="checked";
- }
- }
- /*************************************************/
- // 處理全不選
- document.getElementById('checkNo').onclick=function(){
- // 獲取所有的複選框
- var checkElements=document.getElementsByName('items');
- for(var i=0;i<checkElements.length;i++){
- var checkElement=checkElements[i];
- // 方法一(yī)火狐不支持
- // checkElement.setAttribute('checked',null);
- // 方法二 火狐和ie都支持
- checkElement.checked=null;
- }
- }
- /******************************************************************/
- //反選
- document.getElementById('checkReverse').onclick=function(){
- // 獲取所有的複選框
- var checkElements=document.getElementsByName('items');
- for(var i=0;i<checkElements.length;i++){
- var checkElement=checkElements[i];
- if (checkElement.checked) {
- checkElement.checked=null;
- }
- else{
- checkElement.checked="checked";
- }
- // 方法一(yī)
- // checkElement.setAttribute('checked',null);
- // 方法二 火狐和ie都支持
- }
- }
- /***********************************************************/
- //全選/不選
- document.getElementById('checkItems').onclick=function()
- {
- // 獲取所有的複選框
- var checkElements=document.getElementsByName('items');
- if (this.checked) {
- for(var i=0;i<checkElements.length;i++){
- var checkElement=checkElements[i];
- checkElement.checked="checked";
- }
- }
- else{
- for(var i=0;i<checkElements.length;i++){
- var checkElement=checkElements[i];
- checkElement.checked=null;
- }
- }
- }
- </script>
- </body>
- </html>
js寫全選按鈕、全不選按鈕、反選按鈕、全選全不選複選框代碼