單個和多個checkbox選中事件

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

如果使用jQuery,應使用prop方法來獲取和設定checked屬性，不應使用attr,需要的朋友可以參考下

html:

<code class="hljs ocaml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><input <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">type</span>=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"checkbox"</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"check"</span> id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"check"</span>  checked=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"checked"</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Daily"</span> />
<input <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">type</span>=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"checkbox"</span> name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"check"</span>   checked=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"checked"</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Daily"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

1.通過prop方法獲取checked屬性，獲取的checked返回值為boolean，選中為true,否則為flase

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> aaa = $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#check"</span>).prop(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"checked"</span>);
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(aaa){
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"選中"</span>);
 };</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

2.直接呼叫checked屬性，不過如果獲取的結果是一個checkbox，則要加上.checked前加上.get(0)或者[0]才行,多個checkbox則不用。因為你用$選擇出來的結果其實是個陣列的形式，就算一個也是陣列，你得用[]來取第幾個的值。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> aaa = $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#check"</span>).<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>).<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">checked</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(aaa){
 alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"選中"</span>);
 };</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

3、獲取多個checkbox的值

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> groupCheckbox=$(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"input[name='check']"</span>);
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span>(i=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;i<groupCheckbox.length;i++){
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(groupCheckbox[i].<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">checked</span>){
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> val =groupCheckbox[i].<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>;
            alert(val );
        }
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

說明：
如果使用attr方法獲取時：
1、如果當前input中初始化未定義checked屬性，則不管當前是否中，$(“#check”).attr(“checked”)都會返回undefined；

2、如果當前input中初始化已定義checked屬性，則不管是否選中，$(“#selectAll”).attr(“checked”)都會返回checked.

多個checkbox的點選事件

<code class="language-**重點內容** hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"input[name='check']"</span>);
    s.each(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(i)</span> {</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//          alert(i);</span>
            $(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>).click(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.checked==<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>){
                      alert(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.value);
                }
             });
        }); 
})</code><code class="language-**重點內容** hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
</code>

轉載自http://blog.csdn.net/gyb_csdn/article/details/51578323

單個和多個checkbox選中事件

如果使用jQuery,應使用prop方法來獲取和設定checked屬性，不應使用attr,需要的朋友可以參考下 html: <code class="hljs ocaml has-numbering" style="display: block; padding:

Java redis 刪除單個和多個key的方法

@Autowired RedisTemplate<Object, Object> redisTemplate; /** * redis刪除單個和多個key */ @Test public void testRedis

js如何獲得多個checkbox選中的值及input後面所跟的文字

function termRow(){ //定義返回結果集 var termInfos=[]; //迴圈所有tr //陣列拼接通過“,”拼接在一

easypoi導出單個sheet和多個sheet

簡單取數據 logs 註解 ont log 導出 image 研究今天有時間研究了一下easypoi，感覺使用了easypoi導出excel方便了很多，不用寫很多復雜的反射，只需要使用註解和一些工具類就可以實現常用的excel的導出，接下來介紹一下easypoi如何導出

使用vue.js實現checkbox的全選和多個的刪除功能

ons eth table padding ted rip fun lpad let 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

讀取多個CheckBox控件選中的Text文本

讀取多個CheckBox控件 //方法1 private void button1_Click(object sender, EventArgs e) { //遍歷groupBox裏的所有控件:Comtrol foreach (Control c

Struts2單個檔案和多個檔案上傳

<一>簡述： Struts2的檔案上傳其實也是通過攔截器來實現的，只是該攔截器定義為預設攔截器了，所以不用自己去手工配置，<interceptor name=”fileUpload” class=”org.apache.struts2.interceptor.

【Oracle_SQL】查詢/刪除重複的資料(單個欄位和多個欄位條件)

oracle查詢/刪除重複的資料(單個欄位和多個欄位條件) 單個欄位： --查詢重複的全部資料(單個欄位) 思路： 1.根據欄位tid分組，數量大於1的表示tid欄位有重複的資料； 2.根據1查詢出來

textview的多種字型和一個textview中的多個點選事件

在實際開發當中。我們經常會遇到像使用者協議這種形式的textview。這種textview一般都是隻有特殊的幾個字有點選事件。別的都沒有，那麼怎麼辦呢。後來我自己在網上找了很多發現了一種實現方式。我感覺挺不錯的。就拿出來和大家分享一下首先建立一個textviewprot

easyui datagrid checkbox選中事件

script icon alert -i tab amp sel url style $(‘#grid_Order‘).datagrid({ onCheck: function(index, data) { //alert(data[0]);

qt 實現簡單聊天(一個服務器和多個客服端)

qt源碼地址：https://github.com/haidragon/easyChat思路：一個服務器一直接聽某個 ip 的某個端口listen(QHostAddress::Any,port);2.一個服務器有一個容器保存所有各客服端的鏈接（每個鏈接都是一個類）。QList<TcpClient

android-------高德地圖兩點路線和多個點路線繪制

分享圖片下載 style ble use AD tps out font 最近朋友需要兩點路線和多個點路線繪制這個功能，幫忙弄了一下，寫這篇博客與大家分享一下。兩點路線是起點和終點兩個經緯度點，高德繪制出路線，可以實現實線和虛線功能效果圖：相關屬

學習日記13、ajax同時提交from表單和多個參數

表單 reload log DC change AD UC sca col if ($("form").valid()) { $.ajax({ url: "@Url.Action("EditCusAndCusCard")"

倒計時函數（單個和多條）

計時定義 etime gettime type 單個 ret var sel 1、單個的時候 //倒計時function countTime(endtime) { var countDown = ‘‘ //獲取當前時間 var date = new Date(

56、彈出框和多個視窗之間的切換

學習目標： 1、掌握使用Swing實現彈出框功能 2、使用Swing切換視窗 3、新視窗的定義和彈出學習過程：一、彈出框 1、簡介 Java 中的對話方塊是一個容器，它充當父容器的子容器 Swing中的彈出式對話方塊是用JOptionPa

MATLAB：如何在指定路徑下，讀取單個（多個）資料夾中所有影象

0. 選擇資料夾路徑： [filename filepath]=uigetfile('*.*','請選擇檔案');%filename為檔名，filepath為檔案路徑 image = imread(strcat(file_path,image_name));%讀取圖片檔案 1，

多列索引和多個單列索引

參考文章： http://blog.csdn.net/wulex/article/details/69540136 http://blog.csdn.net/gol_phing/article/details/47100619 在關係資料庫中，索引是一種單獨的、物理的對資料庫表中

java 從字串中以單個或多個空格進行分隔提取字串

String str = "test test1 test2 test3"; String [] arr = str.split("\\s+"); for(String ss : arr){

linux 用 grep 查找單個或多個字符串（關鍵字）

grep 關鍵字 inux rep tmp php lin log 成功 1.單個 cat /tmp/php.log | grep "成功" 所有的成功都會被查詢出來。 2.多個，並列查詢 cat /tmp/php.log | grep "推薦

2.SDL2_net TCP伺服器端和多個客戶端

上一節初步瞭解到了伺服器和客戶端的通訊，並且由於受到程式碼的限制，只能是單個客戶端，而且伺服器無法向客戶端傳送資訊，本節使用SDL_Net的套接字列表（Socket Set）特性來實現比上一節功能更強的程式碼，即一個伺服器對應多臺客戶端。一.專案結構CMakeLists.txt的編寫上一

單個和多個checkbox選中事件

多個checkbox的點選事件

相關推薦