首页
所有分类
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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
VUE重点问题总结
Mar 19 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
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
reload(1) 动静分离(1) 防盗链(1) 生成缩略图(1) 反向代理(2) 前后端分离(1) 默认端口(3) http(6) 负载均衡(6) shell(3)
You might like
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
Nodejs进阶：express+session实现简易登录身份认证
2017/04/24 NodeJs
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python解惑之整数比较详解
2017/04/24 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
销售员岗位职责
2014/06/09 职场文书
2014年工商所工作总结
2014/12/09 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015年质检工作总结
2015/05/04 职场文书
驳回起诉裁定书
2015/05/19 职场文书
消防安全主题班会
2015/08/12 职场文书
礼仪培训心得体会
2016/01/22 职场文书
总结Python使用过程中的bug
2021/06/18 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python