首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery获取复选框checkbox的值的简单实现方法

Posted in Javascript onMay 26, 2016

jQuery API :

each(callback) :以每一个匹配的元素作为上下文来执行一个函数。

:checked :匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

js:

//js获取复选框值  
      var obj = document.getElementsByName("interest");//选择所有name="interest"的对象，返回数组  
      var s='';//如果这样定义var s;变量s中会默认被赋个null值
      for(var i=0;i<obj.length;i++){
         if(obj[i].checked) //取到对象数组后，我们来循环检测它是不是被选中
         s+=obj[i].value+',';  //如果选中，将value添加到变量s中  
      }

jquery:

//jquery获取复选框值  
      var chk_value =[];//定义一个数组  
      $('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数  
      chk_value.push($(this).val());//将选中的值添加到数组chk_value中  
      });

其中jsp页面代码

<%@ page language="java" contentType="text/html" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//   basePath = http          :// 127.0.0.1         : 8080          /DWR_checkbox /
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">
  
  <title>DWR获取浏览器页面信息</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">  
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!--
  <link rel="stylesheet" type="text/css" href="styles.css">
  -->
     <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type='text/javascript' src='<%=path%>/dwr/engine.js'></script>
    <script type='text/javascript' src='<%=path%>/dwr/util.js'></script>
    <script type='text/javascript' src='<%=path%>/dwr/interface/test.js'></script>
    <script type='text/javascript' src='<%=path%>/dwr/interface/test1.js'></script>
    <script type='text/javascript' src='<%=path%>/dwr/interface/userLogin.js'></script>
  <script type="text/javascript"> 
  
    function ceshi1()
    { 
      test.hasPermission(mydwr("user").value,mydwr("pass").value, // 使用$()属性获取当前页面输入的用户名和权限的值
        function(data)
        {
          if(data)
          {
            mydwr("hp1").checked = "checked";
          }else{
            mydwr("hp1").checked = null;
          }
          document.getElementById("boolean1").value = data;
        });
    }
    
    function ceshi2()
    {
      test.hasPermission(dwr.util.getValue("username"),dwr.util.getValue("password"),// 使用DWR中的util.js工具中的属性获取当前页面输入的用户名和权限的值，给后台.java的hasPermission方法的参数赋值，再执行此方法(不是void类型有返回值)得到个返回值。
        function(data)
        {
          if(data)
          {
            document.getElementById("hp").checked = "checked"; // 使用byId()属性获取当前页面checkbox的checked属性
          }else{
            document.getElementById("hp").checked = null;
          }
          document.getElementById("boolean2").value = data;
          dwr.util.setValue("boolean3",data);
          //dwr.util.setValue(boolean3,"哈哈");
          dwr.util.setValue(div,data);
          //dwr.util.setValue(body,data);
        }); // 用function(data)方法来处理后台.java方法执行后的返回值，存在data变量中，在执行function(data)方法的语句
    }
    
    function invoke1()
    { 
      dwr.engine.setAsync(false);//<!-- 默认是异步执行的true，设置成false就是同步执行 方法按顺序执行-->
      test1.method1(
        function(data){
          alert(data);
        }
      );
      test1.method2(
        function(data){
          alert(data);
        }
      );
    }
    
    function invoke2(){ 
      test.getArray(
         function(data)
         {
           //for(var i=0;i<data.length;i++){
           //  alert(data[i]);
           //}
           dwr.util.addOptions(selectid,data);//根据后台数组值填充ID为selectid的列表
         });
     } 
     function invoke3(){
      dwr.util.removeAllRows(tid);//根据tbody的id删除该tbody
     }
     
     function invoke4(){
       var a=dwr.util.getText(selectid);
      dwr.util.setValue(tdid,a);
     }
    function show()
    {
      var name = document.getElementById("user").value;
      var pass = document.getElementById("pass").value;
      var obj = new objBean(name,pass); 
      userLogin.alterUser(obj,
        function(data){
          if(name == data.username && pass == data.password){
            alert("success");
          }else{
            alert("error");
          }
          document.getElementById("user").value = data.username;
          document.getElementById("pass").value = data.password;
      });
    }
    function objBean(name,pass)
    {
      this.username = name;
      this.password = pass;
    }
    function go_to()
    {  
      $('#first_jsp').show();
      test.getInclude(function(data){
        $('#first_jsp').html(data);
      });
    }
    function go_to_iframe()
    {
      $("#myframe1").show();
      test.getIncludeBean(function(data){
        $('#myframe1').attr('src',"<%=basePath%>"+data);
      });
    }
    function getInfo(){
      //js获取复选框值  
      var obj = document.getElementsByName("interest");//选择所有name="interest"的对象，返回数组  
      var s='';//如果这样定义var s;变量s中会默认被赋个null值
      for(var i=0;i<obj.length;i++){
         if(obj[i].checked) //取到对象数组后，我们来循环检测它是不是被选中
         s+=obj[i].value+',';  //如果选中，将value添加到变量s中  
      }
      alert(s == '' ? '你还没有选择任何内容！' :s);
      
      dwr.util.setValue(tdid,s);
      //jquery获取复选框值  
      var chk_value =[];//定义一个数组  
      $('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数  
      chk_value.push($(this).val());//将选中的值添加到数组chk_value中  
      });  
      alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);  
      dwr.util.setValue(checkboxInfo,chk_value);
    }
  </script>
 </head>
 <body id="body">
 <form>
   <table id="tableid" border="1" align="center">
     <tr><td>用户名：</td><td><input id="user" type="text" name="username"/></td></tr>
     <tr><td>密码：</td><td><input id="pass" type="text" name="password"/></td></tr>
     <tr>
       <td><input id="getInfo" type="button" value="获取信息" onclick="show()"/></td>
       <td><input type="reset" value="重置" /></td>
     </tr>
     <tbody id="tid">
       <tr>
         <td colspan="2" >
           <input id="hp1" type="checkbox" name="hpname" >测试权限<br>
          <input type="button"name="button"value="测试1" onclick="ceshi1()"> 
          返回值：<input id="boolean1" type="text" />
        </td>
       </tr>
       <tr>
         <td >
           <input id="hp" type="checkbox" name="hpname" >测试权限<br>
           <input type="button"name="button"value="测试2" onclick="ceshi2()">
        </td>
        <td>
          返回值：<input id="boolean2" type="text" />
          dwr.util.setValue:<input id="boolean3" type="text" />
          <div id="div" > 这是一个div标签</div>
        </td>
       </tr>
     </tbody>
     <tr>
       <td id="tdid"colspan="2" >修改此行值</td>
     </tr>
  </table>
  </form>
        <input type="button"name="button"value="异步调用测试" onclick="invoke1()">
        <input type="button"name="button"value="加载Array值" onclick="invoke2()">
        <input type="button"name="button"value="删除所有行" onclick="invoke3()">
        <input type="button"name="button"value="修改行值" onclick="invoke4()">
    <div>
      <select id="selectid"></select>
    </div>
    <input type="button"name="button"value="框架(iframe)中加载bean.jsp" onclick="go_to_iframe()">
    <input type="button"name="button"value="DIV中加载first.jsp" onclick="go_to()">
    <iframe id="myframe1" style="width:500;height:200;border:10px;padding:0px;display:none" src="" ></iframe>
    <div id="first_jsp" style="width: 100%; height: auto; display:none"></div>
<form>
    <input type="checkbox" name="interest" value="VC" />VC
    <input type="checkbox" name="interest" value="VB" />VB
    <input type="checkbox" name="interest" value="VFoxpro" />VFoxpro
    <input type="checkbox" name="interest" value="VJava" />VJava
    <input type="checkbox" name="interest" value="BC" />BC
    <input type="checkbox" name="interest" value="Cobol" />COobol
    <input type="checkbox" name="interest" value="Java" />Java
    <input type="checkbox" name="interest" value="Delphi" />Delphi
    <input type="button" value="获取复选框值" onclick="getInfo()">
</form>
    <div id="checkboxInfo" style="width: 100%; height: auto; display:block"></div>
 </body>
</html>

以上这篇jquery获取复选框checkbox的值的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

jquery获取复选框checkbox的值的简单实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 #Javascript
jquery获取所有选中的checkbox实现代码
May 26 #Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 #Javascript
动态加载js、css的简单实现代码
May 26 #Javascript
JS hashMap实例详解
May 26 #Javascript
jQuery验证插件validate使用方法详解
Sep 13 #Javascript
动态加载js、css的实例代码
May 26 #Javascript
幻读(5) innoDB(3) 经纬度(1) ctypes(1) MVCC(4) 历史记录(1) html标准库(1) 间隙锁(2) C/C++(1) dll(1)
You might like
PHP管理依赖(dependency)关系工具 Composer的自动加载（autoload）
2014/08/18 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
探讨跨域请求资源的几种方式（总结）
2016/12/02 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
python连接mysql实例分享
2016/10/09 Python
详解Python中类的定义与使用
2017/04/11 Python
python版简单工厂模式
2017/10/16 Python
python保存网页图片到本地的方法
2018/07/24 Python
详解python-图像处理（映射变换）
2019/03/22 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Answear匈牙利：来自全球200多个知名时尚品牌
2017/04/21 全球购物
加拿大时装零售商：Influence U
2018/12/22 全球购物
英国露营设备和户外服装购物网站：Simply Hike
2019/05/05 全球购物
Carolina Lemke Berlin澳大利亚官网：时尚太阳镜品牌
2019/09/17 全球购物
留学推荐信怎么写
2014/01/25 职场文书
个人现实表现材料
2014/02/04 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
年度考核自我鉴定
2014/03/19 职场文书
电信营业员岗位职责
2015/04/14 职场文书