javascript 全選與反選

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box input{
                width:20px;
                height: 20px;
            }
        </style>
    </head>
    <body 
>
    <!--    這裡是設定三個input按鈕-->
        <input type="button" name="" id="qx" value="全選" />
        <input type="button" name="" id="bx" value="不選" />
        <input type="button" name="fx" id="fx" value="反選" />
        <!--下面是複選框-->
        <div id="box">
            <input 
 type="checkbox"  /><br />
            <input type="checkbox"  /><br />    
            <input type="checkbox"  /><br />
            <input type="checkbox"  /><br />    
            <input type="checkbox"  /><br />
            <input type="checkbox"  /> 
<br />        
        </div>
    </body>

    <script type="text/javascript">
//        獲取一個id的函式
        function id(id){
            return document.getElementById(id);
        }
//      獲取複選的盒子
        var oBox=id('box');
        var oIn=oBox.getElementsByTagName('input');

        id('qx').onclick=function(){//點選全選時執行函式
            for(i=0;i<oIn.length;i++){
            oIn[i].checked=true;// 讓所有的複選框都選上，這裡注意checked的c不能大寫
            }
        }
        id('bx').onclick=function(){//點選不選時執行函式
            for(i=0;i<oIn.length;i++){
            oIn[i].checked=false;
            }
        }
            id('fx').onclick=function(){//點選反選時執行
            for(i=0;i<oIn.length;i++){//設定一個迴圈
            if(oIn[i].checked==true){//設定一個判定，如果單選框是選中狀態
            oIn[i].checked=false;//就讓單選框處於未選中狀態
            }else{
                oIn[i].checked=true;//反之就讓其選中
            }
            }
        }
    </script>
</html>

javascript 全選與反選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

DOM操作案例之--全選與反選

doc .cn 單選 bre ont light margin break wid 全選與反選在表單類的項目中還是很常見的，電商項目中的購物車一定少不了這個功能。下面我只就用一個簡單的案例做個演示吧。 <div class="wrap"> <t

全選與反選添加

數據 obj 網絡請求 checkbox 排序 jquery pac book inner <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script

個人js學習例項-點選按鈕實現全選與反選，及封裝函式呼叫前後

原始： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

jQuery 實現複選框的全選與反選

用angular實現多選按鈕的全選與反選

在頁面中我們常常會遇到多選框，例如購物車裡的商品下面用angular來實現這一功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

jquery的全選與反選

效果圖prop方法prop() 方法設定或返回被選元素的屬性和值。當該方法用於返回屬性值時，則返回第一個匹配元素的值。當該方法用於設定屬性值時，則為匹配元素集合設定一個或多個屬性/值對。注意：prop() 方法應該用於檢索屬性值，例如 DOM 屬性（如 selectedInd

js實現全選與反選

checkbox的全選與反選，有時候還是會遇到的，這裡做下分享，如有不足之處，請加以指出<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

vue中復選框全選與反選

事件狀態 dex 主要部分過濾 lis 反選觸發事件 value 　　html主要部分：　 <template v-for="(item, index) in checkboxList"> 　　<input type="checkbox" v

Android 購物車（精仿）可刪可全選與反選

展示效果主Activity中的方法 public class MainActivity extends Activity implements ShopcartExpandableListViewAdapter.CheckInterface,

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

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

用JavaScript實現CheckBox的全選取消反選，及遮罩層中添加內容

document 當前 CI itl HA posit size classlist ML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

案例：全選與全不選及反選

註冊 check 全不選 eve 處理所有 class classname box 效果圖如下:點擊全選時會全部選中;全不選時全部不選;反選時反向選中. html結構代碼: <input class = ‘check‘ type="checkbox" >&l

JavaScript實現全選，反選，不選--小記

學習前端的時候記下小知識點。如下】、 <script> //靜態頁面載入完成後再載入。js window.onload=function () { var btn1=document.getElement

JavaScript實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var

JavaScript複選框實現全選、全不選、反選、提交

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>全選<

JavaScript-選擇項中的全選、全不選、反選

程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <s

【JavaScript】實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var all

javascript+html+css簡單的實現複選框的全選與單選

<!DOCTYPE html> <html> <head> <title>html+css+js簡單實現複選框全選</title> <meta http-equiv="content-type

js實現復選框的全選、全部選和反選

item itl true mon 復選框 loading 實現 align inpu 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

javascript 全選與反選

相關推薦