您的位置：首页 > Web前端 > JQuery

jquery的checkbox取值赋值选中

2016-03-18 14:33 561 查看

<%@ 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

转载请注明：/article/8544996.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航