1. 程式人生 > >label+input 選擇(優化多選按鈕)及 input實現全選反選

label+input 選擇(優化多選按鈕)及 input實現全選反選

1、多選, 選擇之後不同的背景, input中 id和label中 for對應的值必須相同

'<label class="inputLable" for=' + item.orderId + '><input type="checkbox" id=' + item.orderId + ' value=' + item.orderId + ' "/></label>' ;

input[type="checkbox"] {

appearance: none;

-webkit-appearance: none;

outline: none;

display: none

}

.inputLable input[type="checkbox"] {

width: 20px;

height: 20px;

display: inline-block;

background: url(../../imges/moreDelivery/[email protected]) no-repeat;

background-size: 100%;

}

.inputLable input[type="checkbox"]:checked {

width: 20px;

height: 20px;

display: inline-block;

background: url(../../imges/moreDelivery/

[email protected]) no-repeat;

background-size: 100%;

}

2、設定label背後的選中陰影

label {

outline: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

3、實現全選和反選(一個按鈕)

var ch = document.getElementById("box");

if (document.getElementsByName("allChecked")[0].checked == true) {

$(':checkbox').prop('checked', true);

} else {

$(':checkbox').prop('checked', false);

}

相關推薦

label+input 選擇優化按鈕 input實現

1、多選, 選擇之後不同的背景, input中 id和label中 for對應的值必須相同 '<label class="inputLable" for=' + item.orderId + '><input type="checkbox" id=' +

利用js實現功能(check)

box tag 實現 所有 利用 .get 乒乓球 獲取 get <!DOCTYPE html><html><head><meta charset="utf-8"/><title></ti

玩轉Android---UI篇---CheckBox按鈕

原址:http://hualang.iteye.com/category/143855 多選按鈕CheckBox的可以實現多項選擇,我們可以現在佈局檔案中定義多選按鈕,然後對每一個多選按鈕進行事件監聽 setOnCheckedChangeListener,通過isC

安卓---RedioButton(單按鈕)、CheckBox按鈕

radio eight color ont parent androi android 安卓 radi <RadioGroup android:layout_width="fill_parent" android:layout_height="wra

JS實現按鈕複製<input>標籤中的值到剪貼簿

<div id="div">     <p>我的推廣連結:</p>     <input id="input" value="http://www.baidu.com" readonly/>     <butt

Django ORM效能優化之count和len方法的選擇非常詳細推薦乾貨

  接下來我將從原始碼層面分情況和應用分析我們在計算queryset資料集時是用orm的count函式計算長度還是用len函式計算資料集長度。     首先,我們知道ORM查詢queryset資料集是惰性查詢的,只有使用到資料集時,ORM才會真正去執行查詢語句,然後ORM會把查詢到的資料集快取到記憶

setTimeout()和setInterval() 何時被調用執行線程.RP

date() htm 並且 logs argument tle 有時 call line 定義 setTimeout()和setInterval()經常被用來處理延時和定時任務。setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式,而setInterval

【Qt入門實踐】Qt之哲學家問題linux 線程

avi .cpp private 1=1 endif debug 問題 tel pub 轉載請註明出處:http://blog.csdn.net/feng1790291543 linux多線程實現哲學家問題,依據哲學家吃飯、拿筷子、放下筷子...... 首先,主

Optimization and Machine Learning優化與機器學習

compute war limit label right whether computer itself phy 這是根據(ShanghaiTech University)王浩老師的授課所作的整理。 需要的預備知識:數分、高代、統計、優化 machine learning

ThreadPoolExecutor中策略的選擇與工作隊列的選擇java線程池

完全 系統 rod 大小 font 操作系統 重復 null 定義 工作原理 1、線程池剛創建時,裏面沒有一個線程。任務隊列是作為參數傳進來的。不過,就算隊列裏面有任務,線程池也不會馬上執行它們。 2、當調用 execute() 方法添加一個任務時,線程池會做如下判斷:

WinRAR 5.50 簡體中文正式版發布20項改進

安全漏洞 配置 指定 簡體中文 pan 替換 點擊 防止 指示 感謝ikimi的投遞 流行好用的壓縮工具,支持鼠標拖放及外殼擴展,完美支持 ZIP 檔案,內置程序可以解開 CAB、ARJ、LZH、TAR、GZ、ACE、UUE、BZ2、JAR、ISO 等多種類型的壓縮文

CentOS 6.9安裝類型選擇Basic Server/Web Server

devel ref http com base linux href linu postgresq Desktop :基本的桌面系統,包括常用的桌面軟件,如文檔查看工具。 Minimal Desktop:基本的桌面系統,包含的軟件更少。 Minimal:基本的系統,不含

問題7:如何實現用戶的歷史記錄功能n條

NPU app while less ase 退出 添加 數字 pri 實例:制作猜字遊戲,添加歷史記錄功能,顯示用戶最近猜過的數字 解決方案:使用容量為n的隊列存儲歷史記錄 使用標準庫colections中的deque,一個雙端循環隊列 程序退出前,可以使用pick

Matplotlib學習---matplotlib裏顏色,標記,線條類型參數的選擇colors, markers, line styles

light bfd hot thead ace silver stl add tpi 顏色(Colors): 基礎顏色: charactercolor ‘b‘ blue ‘g‘ green ‘r‘ red ‘c‘ cyan ‘m‘ magenta

回歸分析特征選擇包括Stepwise算法 python 實現

排序 moved lis ack adding += tick nump [1] # -*- coding: utf-8 -*-"""Created on Sat Aug 18 16:23:17 2018@author: acadsoc"""import scipyimpo

從onclick到function到ajax的url問號傳個引數的話以此類推問題

廢話不多直接上程式碼 onclick <a class="blue" onclick="changeUse('${use.device_code}','${use.device_use }');" href="javascript:void(0)" data-rel="tooltip

QT學習記錄2QT執行緒

對QT多執行緒的理解 qt多執行緒基於QThread類,在使用的時候,可以選擇新建類,然後繼承QThread類,然後重寫run函式,從而實現QT多執行緒   QT多執行緒小例程 首先,建立一個QT工程,名字叫做mythread,視窗選擇widget,然後一路下一步即可,生成

Struts2+Spring+Hibernate整合開發Maven模組搭建

Struts2+Spring+Hibernate整合開發(Maven多模組搭建) 0.專案結構 Struts2:web層 Spring:物件的容器 Hibernate:資料庫持久化操作   1.父模組匯入和管理所有需要的jar包 <?xml v

前端小記3嵌入個Echart

引入Echart時,需要插入div,eg: < div id= "main" style= "width: 600px;height:400px;position:absolute;left:400px;" ></

前端上傳圖片到oss服務,模仿微博張圖片上傳九張

效果圖如下 核心js檔案 推薦《前端上傳元件Plupload使用指南》,有較詳細使用指南。 檔案地址: https://www.cnblogs.com/2050/p/3913184.html#plupload_doc4 首先是css檔案的引入 上傳元