jquery获取复选框checkbox的值

Posted 孟宇

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery获取复选框checkbox的值相关的知识,希望对你有一定的参考价值。

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中      
            }  
 
Js代码  收藏代码
//jquery获取复选框值      
            var chk_value =[];//定义一个数组      
            $(‘input[name="interest"]:checked‘).each(function(){//遍历每一个名字为interest的复选框,其中选中的执行函数      
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中      
            });  
 
html代码  收藏代码
<%@ 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怎么获取多选框的值

jquery 获取checkbox多选框的值

jquery怎么得到复选框值

jquery怎样获取多个复选框的值?

jQuery怎么得到复选框选中的值

在jsp中获取已选中checkbox其他列的值