jquery的checkbox取值赋值选中

绝地灬酷狼 2022-07-29 08:35 219阅读 0赞

![20160318143607743][]

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path;
    %>
    <html lang="us">
    <head>
    	<meta charset="utf-8">
    	<title>checkbox赋值测试</title>
    	<link type="text/css" href="<%=basePath%>/resources/css/jquery-ui/jquery-ui.css" rel="stylesheet" />
    
    </head>
    <body>
    	<h2>checkbox赋值测试</h2>
    	<br/>
    
    	<div class="form-group">
    	    <label>Checkboxes</label>
    	    <br/>
    	    <div class="checkbox">
    	        <label>
    	            <input type="checkbox"  name="chk" value="101">Checkbox 1
    	        </label>
    	    </div>
    	    <div class="checkbox">
    	        <label>
    	            <input type="checkbox"   name="chk" value="102">Checkbox 2
    	        </label>
    	    </div>
    	    <div class="checkbox">
    	        <label>
    	            <input type="checkbox"  name="chk"  value="103">Checkbox 3
    	        </label>
    	    </div>
    	    <div class="checkbox">
    	        <label>
    	            <input type="checkbox"   name="chk" value="104">Checkbox 4
    	        </label>
    	    </div>
    	    <div class="checkbox">
    	        <label>
    	            <input type="checkbox"   name="chk" value="105">Checkbox 5
    	        </label>
    	    </div>
    	</div>
    
    <br/>
    
    	<button class="btn" 	type="button" id="btnSelectAll">全选</button>
    	<button class="btn" 	type="button" id="btnSelectNull">全不选</button>
    	<button class="btn" 	type="button" id="btnSelect1and3">选1和3</button>
    	
    	<button class="btn" 	type="button" id="btnGetVal">取值</button>
    	
    </body>
    </html>
    
    
    <script type="text/javascript" src="<%=basePath%>/resources/js/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/resources/js/jquery-ui/jquery-ui.js"></script>
    <script>
    
    $(function(){
    	$("#btnSelectAll").click(function () {
    		selectAll();
    	});
    	$("#btnSelectNull").click(function () {
    		selectNull();
    	});
    	$("#btnSelect1and3").click(function () {
    		select1and3();
    	});
    	$("#btnGetVal").click(function () {
    		getVal();
    	});
    });
    
    function selectAll(){
    	$("input[name='chk']").each(function(){ 
    		//$(this).attr("checked", true);
    		this.checked=true;
    	});
    }
    function selectNull(){
    	$("input[name='chk']").each(function(){ 
    		this.checked=false;
    	});
    }
    function select1and3(){
    	//先清空选项
    	selectNull();
    	var sel = [];
    	sel.push("101");
    	sel.push("103");
    	for(var i=0;i<sel.length;i++){
    		$("input[name='chk']").each(function(){ 
        		if ($(this).val() == sel[i]) {
        			this.checked=true;
        		} 
        	});
    	}
    }
    function getVal(){
    	var chk_value =[];//定义一个数组    
        $('input[name="chk"]:checked').each(function(){//遍历每一个名字为nodes的复选框，其中选中的执行函数    
        	chk_value.push($(this).val());//将选中的值添加到数组chk_value中    
        });
        var groups = chk_value.join(",");
        alert(groups);
    }
    
    </script>

下载地址：[http://git.oschina.net/paincupid/springmvc/tree/bootstrap/src/main/webapp/WEB-INF/views/widget?dir=1&filepath=src%2Fmain%2Fwebapp%2FWEB-INF%2Fviews%2Fwidget&oid=deae6282b3d818fee4eb2000ada468ad4792b2c1&sha=58f6f3d7de8576fab60edabab3449da71b58a6fe][http_git.oschina.net_paincupid_springmvc_tree_bootstrap_src_main_webapp_WEB-INF_views_widget_dir_1_filepath_src_2Fmain_2Fwebapp_2FWEB-INF_2Fviews_2Fwidget_oid_deae6282b3d818fee4eb2000ada468ad4792b2c1_sha_58f6f3d7de8576fab60edabab3449da71b58a6fe]

转载请注明：[http://blog.csdn.net/paincupid/article/details/50923271][http_blog.csdn.net_paincupid_article_details_50923271]

[20160318143607743]: /images/20220728/3924858d9f734b8f85193036e018d7a3.png
[http_git.oschina.net_paincupid_springmvc_tree_bootstrap_src_main_webapp_WEB-INF_views_widget_dir_1_filepath_src_2Fmain_2Fwebapp_2FWEB-INF_2Fviews_2Fwidget_oid_deae6282b3d818fee4eb2000ada468ad4792b2c1_sha_58f6f3d7de8576fab60edabab3449da71b58a6fe]: http://git.oschina.net/paincupid/springmvc/tree/bootstrap/src/main/webapp/WEB-INF/views/widget?dir=1&filepath=src%2Fmain%2Fwebapp%2FWEB-INF%2Fviews%2Fwidget&oid=deae6282b3d818fee4eb2000ada468ad4792b2c1&sha=58f6f3d7de8576fab60edabab3449da71b58a6fe
[http_blog.csdn.net_paincupid_article_details_50923271]: http://blog.csdn.net/paincupid/article/details/50923271