首页
所有分类
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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
js获取php变量的实现代码
Aug 10 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
如何使用CocosCreator对象池
Apr 14 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
音箱(1) 探测器(1) 电路(15) 收信机(3) 春雷3P7(1) BOSE(2) 原理(1) ICF-2010(1) 单管机(1) 耳机(1)
You might like
东方红 - 来复式再生机的修复
2021/03/02 无线电
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
discuz目录文件资料汇总
2014/12/30 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python实现聚类算法原理
2018/02/12 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python实现两个list求交集，并集，差集的方法示例
2018/08/02 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python3实现raspberry pi（树莓派）4驱小车控制程序
2020/02/12 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
委托书的写法
2014/08/30 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
学习经验交流会总结
2015/11/02 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫