jQuery實(shí)現(xiàn)獲取多選框的值示例

更新時(shí)間：2020年02月07日 12:14:45 作者：weixin_37914752

這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取多選框的值,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性獲取相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)獲取多選框的值。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>www.dhdzp.com jQuery獲取多選框的值</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>蘋果:
    <input type="checkbox" name="id" value="aa">香蕉:
    <input type="checkbox" name="id" value="bb">橘子:
    <input type="checkbox" name="id" value="cc">
    <button id="btn">批量刪除</button>
  </body>
  <script>
  $('#btn').click(function () {
    var id=[];
    $("input[name='id']:checked").each(function(){
      id.push($(this).val());
    });
    console.log(id);
  });
  </script>
</html>

運(yùn)行效果

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

MultiSelect左右選擇控件的設(shè)計(jì)與實(shí)現(xiàn)介紹
由于項(xiàng)目中用到左右選擇的控件，網(wǎng)上找了一些相關(guān)的實(shí)現(xiàn)，基本上有兩個(gè):1、基于JQuery UI的控件2、某個(gè)兄弟手寫的一個(gè)控件,具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-06-06
基于jquery實(shí)現(xiàn)的可以編輯選擇的下拉框的代碼
主要是通過(guò)CSS樣式表中clip來(lái)實(shí)現(xiàn)的。兼容IE6-8,谷歌，火狐等。
2010-11-11
淺談 jQuery 事件源碼定位問(wèn)題
在一個(gè)不是自己寫的頁(yè)面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡(jiǎn)單的介紹下,需要的朋友可以參考下
2014-06-06
jQuery使用之處理頁(yè)面元素用法實(shí)例
這篇文章主要介紹了jQuery使用之處理頁(yè)面元素用法,實(shí)例分析了jQuery針對(duì)元素的內(nèi)容、復(fù)制、移動(dòng)和替換等操作技巧,需要的朋友可以參考下
2015-01-01
從零學(xué)jquery之如何使用回調(diào)函數(shù)
回調(diào)函數(shù)指的是被調(diào)用者完成處理后自動(dòng)回調(diào)調(diào)用者預(yù)先傳遞的函數(shù)。
2014-05-05
淺析jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別
本篇文章主要是對(duì)jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
如何理解jQuery中的ajaxSubmit方法
本文主要介紹了jQuery中的ajaxSubmit方法的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
jQuery提示插件qTip2用法分析(支持ajax及多種樣式)
這篇文章主要介紹了jQuery提示插件qTip2用法,結(jié)合實(shí)例形式分析了qTip2的使用技巧,可支持ajax及多種樣式的設(shè)置,需要的朋友可以參考下
2016-06-06
jQuery?在圖片和文字中插入內(nèi)容實(shí)例
jQuery是一種流行的JavaScript庫(kù)，可以輕松地在網(wǎng)頁(yè)中插入圖片和文字。通過(guò)使用jQuery的插入功能，您可以在網(wǎng)頁(yè)上動(dòng)態(tài)地添加內(nèi)容，從而提高用戶體驗(yàn)。本文將介紹如何使用jQuery在圖片和文字中插入內(nèi)容，并提供一些實(shí)用的代碼示例。
2023-06-06
jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析
這篇文章主要介紹了jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析,本文試圖從整體來(lái)闡述一下jQuery的內(nèi)部實(shí)現(xiàn),需要的朋友可以參考下
2015-02-02