javasctipt實現-複選框全選/反選的實現

阿新 • • 發佈：2019-01-16

以下是用原生js實現的複選框全選/反選的實現
選中checkbox的時候，實現全選的效果，並且樣式發生改變。
程式碼最簡潔，js行為優化版，複製貼上即可使用。
**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>複選框全選/反選效果實現</title>
    <style>
        body,dl,dt,dd,p{margin:0;padding:0;}
        body{font-family 
:Tahoma;font-size:12px;}
        label,input,a{vertical-align:middle;}
        label{padding:0 10px 0 5px;}
        a{color:#09f;text-decoration:none;}
        a:hover{color:red;}
        dl{width:120px;margin:10px auto;
        border-radius:5px;background:#fafafa;}
        dt{padding-bottom:10px;
        border-bottom 
:1px solid #666;}
        dt label{font-weight:700;}
        p{margin-top:10px;}
    </style>
</head>
<body>
    <dl>
    <dt><input type="checkbox" id="checkAll" /><label>全選</label><a href="javascript:;">反選</a></dt>
    <dd>
        <p 
><input type="checkbox" name="item" /><label>選項（一）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（二）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（三）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（四）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（五）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（六）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（七）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（八）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（九）</label></p>
        <p><input type="checkbox" name="item" /><label>選項（十）</label></p>
    </dd>    
</dl>
<script type="text/javascript">
(function(){
    var aInput = document.getElementsByTagName("input");
    var aBack = document.getElementsByTagName("a")[0];
    var aLabel = document.getElementsByTagName("label")[0];
    var allInput = aInput[0];
        //全選設定,當點選事件發生時候，如果被選擇全部選中，並且文字內容改變
        allInput.onclick=function(){
            if(aInput[0].checked){
            for(var i=1;i<aInput.length;i++){
                aInput[i].checked = true;
            }
                aLabel.innerHTML = "全不選";
            }
            else{
                for(var i=1;i<aInput.length;i++){
                aInput[i].checked = false;
                }
                aLabel.innerHTML = "全選";
            }

        }
        //反選設定，選中的內容是原本內容的取反
        aBack.onclick=function(){
            for(var i=1;i<aInput.length;i++){
                aInput[i].checked = !aInput[i].checked;
            }
        }
})();
</script>
</body>
</html>

javasctipt實現-複選框全選/反選的實現

以下是用原生js實現的複選框全選/反選的實現選中checkbox的時候，實現全選的效果，並且樣式發生改變。程式碼最簡潔，js行為優化版，複製貼上即可使用。 ** <!DOCTYPE

js實現複選框全選/全不選/反選

js實現複選框全選/全不選/反選 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

JQuery 實現複選框全選反選功能

HTML部分 <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input ty

jQuery實現複選框全選、反選、全不選

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> &l

jquery實現復選框全選，全不選，反選中的問題

了解 span htm cli ems 添加 send 籃球需要今天試了一下用jquery選擇復選框，本來以為很簡單的東西卻有bug,於是搜索了一下找到了解決方法。 html代碼如下（這裏沒有用任何樣式，就沒有再放css了）： <html> <

jQuery js實現checkbox復選框全選、全不選、反選 PHP

實現 com check set false jquer display value round <!doctype html> <html lang="en"> <head> <meta charset="

【JS】用checked實現複選框全選和全不選

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>無標題文件</title>

Jquery 複選框全選、反選

$("#checkall").click( function(){ if(this.checked){ $("input[name='total']").each(function(){this.checked=true;});

jquery實現複選框全選全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成複選框的全選和全不選</title> <script t

原生js實現複選框全選全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選和全不選</title> <script> function

複選框全選和反選例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascri

jquery和js分別實現獲取checkbox的值+jquery實現複選框全選

//jquery實現全選 $(function(){ $("#checkAll").click(function(){ $(".checkOne").attr("checked",this.checked) }) }) //批量刪除jquery實現提示 function p_d

【前端】複選框全選實現方法

原始碼 <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.7.1.min.js

js實現checkbox全選和取消，子複選框全選時全選框也自動選上

<input type="checkbox" id="allcheck" onclick="demo()" />全選 <input type="checkbox" name="choice" class="checknum" onclick="se

【js】趙雅智_js複選框全選反選全不選案例

html介面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>nameNode.html</title>

JQuery 迴圈遍歷 , 複選框全選全消反選checked屬性

陣列集合的遍歷 $.each(list,function(index,item){ this. //this就表示item}); jquery物件的迴圈遍歷 jquery物件.each(function(){ this. //this就表示迴圈的jquery物件})

jquery複選框全選,反選和不選

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" sr

復選框全選反選問題

spring click springmvc mvc控制器 next put array console input <script type="text/javascript"> $(function(){ $("#dispatch_

js 實現復選框全選全部選

tails elements 全選 str byname false public xhtml under http://blog.csdn.net/sunwei3160/article/details/38515187 <!DOCTYPE html PUB

Jquery 復選框全選與反選點擊執行一次然後失效解決方案

jquery cli attr false jquer function class 作用 ear 在做項目時遇到一個bug，checkbox全選與反選功能，只能點擊一次，再點就不起作用了，為了解決此問題，我查找了好多資料，下面把具體解決方案整理分享給大家，需要的朋友可以

javasctipt實現-複選框全選/反選的實現

相關推薦