有用的JQUERY小样例

最新推荐文章于 2018-10-22 23:09:00 发布

chiliuyong3321

最新推荐文章于 2018-10-22 23:09:00 发布

阅读量93

点赞数

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/whwei1982/blog/146370

版权

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>louis-blog >> jQuery 对checkbox的操作</title>  
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script> 
 $("document").ready(function(){  
 $("#btn1").click(function(){
    $("[name='checkbox']").attr("checked",'checked');//全选  
 });  
$("#btn2").click(function(){  
$("[name='checkbox']").removeAttr("checked");//取消全选  
})  
$("#btn3").click(function(){  
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  
$("[name='checkbox']:odd").removeAttr("checked");//选中所有奇数  
})  
$("#btn4").click(function(){  
$("[name='checkbox']").each(function(){//反选  
if($(this).is(':checked')){ 
// if $(this).prop('checked')
$(this).removeAttr("checked");  
}  
else{  
$(this).attr("checked",'true');  
}  
})  
})  
$("#btn5").click(function(){//输出选中的值  
var str="";  
$("[name='checkbox'][checked]").each(function(){  
str+=$(this).val()+"\r\n";  
//alert($(this).val());  
})  
alert(str);  
})  
})  
-->  
</script>  
</HEAD>  
<body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;">  
<div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">  
<form name="form1" method="post" action="">  
<input type="button" id="btn1" value="全选">  
<input type="button" id="btn2" value="取消全选">  
<input type="button" id="btn3" value="选中所有奇数">  
<input type="button" id="btn4" value="反选">  
<input type="button" id="btn5" value="获得选中的所有值">  
<br /><br />  
<input type="checkbox" name="checkbox" value="checkbox1">  
checkbox1  
<input type="checkbox" name="checkbox" value="checkbox2">  
checkbox2  
<input type="checkbox" name="checkbox" value="checkbox3">  
checkbox3  
<input type="checkbox" name="checkbox" value="checkbox4">  
checkbox4  
<input type="checkbox" name="checkbox" value="checkbox5">  
checkbox5  
<input type="checkbox" name="checkbox" value="checkbox6">  
checkbox6  
</form>  
</div>  
</body>  
</HTML>

转载于:https://my.oschina.net/whwei1982/blog/146370