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

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

Posted in Javascript onMay 30, 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版代码高亮
Jun 26 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）
Jul 18 Javascript
九种原生js动画效果
Nov 11 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 #Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 #Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 #Javascript
js获取所有checkbox的值的简单实例
May 30 #Javascript
一览画面点击复选框后获取多个id值的方法
May 30 #Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 #Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 #Javascript
PL550(1) GF515(1) RP2100(1) 乐信(1) SRF-M100(1) 德劲1102(1) 低放电路(1) 安健(1) ICF-SW7600(1) SHARP(1)
You might like
windows xp下安装pear
2006/12/02 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
Three.js基础部分学习
2017/01/08 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
详解Python中的正则表达式
2018/07/08 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
keras中的backend.clip用法
2020/05/22 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
来自世界各地的优质葡萄酒：VineShop24
2018/07/09 全球购物
瑞典多品牌连锁店：Johnells
2021/01/13 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
大四毕业生学习总结的自我评价
2013/10/31 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
联谊会主持词
2014/03/26 职场文书
英文请假条
2014/04/11 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
我是特种兵观后感
2015/06/11 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
React自定义hook的方法
2022/06/25 Javascript