jquery的checkbox取值赋值选中

最新推荐文章于 2024-05-16 16:53:58 发布

arthur.dy.lee

最新推荐文章于 2024-05-16 16:53:58 发布

阅读量1.5w

点赞数 3

分类专栏： jquery 文章标签： checkbox jquery jquery的checkbox取值赋值选

本文链接：https://blog.csdn.net/paincupid/article/details/50923271

版权

jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

jquery的checkbox取值赋值选中

<%@ 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://blog.csdn.net/paincupid/article/details/50923271