《jquery权威指南2》学习笔记------ jquery获取复选框的值
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <mce:style><!--
- --></mce:style><style mce_bogus="">
- </style>
- <title>JS获取复选框被选中的值</title>
- </head>
- <body>
- <input type="checkbox" name="test" value="" />
- <input type="checkbox" name="test" value="" />
- <input type="checkbox" name="test" value="" />
- <input type="checkbox" name="test" value="" />
- <input type="checkbox" name="test" value="" />
- <input type="checkbox" name="test" value="" />
- <input type="checkbox" name="test" value="" />
- <input type="checkbox" name="test" value="" />
- <input type="button" onclick="chk()" value="提 交" />
- </body>
- </html
JS代码
对checkbox的其他几个操作
1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值
js代码
- $("document").ready(function(){
- $("#btn1").click(function(){
- $("[name='checkbox']").attr("checked",'true');//全选
- })
- $("#btn2").click(function(){
- $("[name='checkbox']").removeAttr("checked");//取消全选
- })
- $("#btn3").click(function(){
- $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
- })
- $("#btn4").click(function(){
- $("[name='checkbox']").each(function(){//反选
- if($(this).attr("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);
- })
- })
html代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>louis-blog >> jQuery 对checkbox的操作</title>
- <mce:script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js" mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></mce:script>
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- $("document").ready(function(){
- $("#btn1").click(function(){
- $("[name='checkbox']").attr("checked",'true');//全选
- })
- $("#btn2").click(function(){
- $("[name='checkbox']").removeAttr("checked");//取消全选
- })
- $("#btn3").click(function(){
- $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
- })
- $("#btn4").click(function(){
- $("[name='checkbox']").each(function(){//反选
- if($(this).attr("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>
《jquery权威指南2》学习笔记------ jquery获取复选框的值的更多相关文章
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- 获取url中的参数\+发送ajax请求根路径|+获取复选框的值
//获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...
- 使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询
这是界面代码: function shua(){ var id_array=new Array(); $('input[id="checkAll& ...
- jquery学习笔记:获取下拉框的值和下拉框的txt
<div class="form-group"> <select class="form-control" id="iv_level ...
- jquery获取复选框的值
勾选checkbox,并把勾选的值显示在某个div中 <!DOCTYPE html > <html> <head> <meta charset="U ...
- 原生js获取复选框的值
obj = document.getElementsByName("dk_tj"); var longtxt = ""; for (k in obj) { ...
- mui开发中获取单选按钮、复选框的值
js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...
- jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值
做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...
- jquery怎样获取多个复选框的值?
jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element)); ...
随机推荐
- 如何修改浏览器默认的alert样式?
window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = &qu ...
- C++中四种类型转换以及const_cast是否能改变常量的问题
we have four specific casting operators:dynamic_cast, reinterpret_cast, static_cast and const_cast. ...
- sim800L调试问题
SIM800L默认上电开机,若此时没有把rst和pwk引脚提前设置好,SIM800l会使stm32进入硬件中断(这可能是因为方面电源的原因导致的),同时sim800L开机后需要一定的时间稳定下来,建议 ...
- 记一次解决layui 的bug - layer.open 与 layui渲染问题
场景是这样的,通过layer打开一个弹窗,里面放置一个表单,表单是用layui来渲染的. 当弹窗完成之后,我需要渲染表单中的一些内容.譬如laydate. layer.open({ type: 1, ...
- OSI各层的功能和主要协议(转载)
OSI各层的功能和主要协议: 物理层 物理层规定了激活.维持.关闭通信端点之间的机械特性.电气特性.功能特性以及过程特性.该层为上层协议提供了一个传输数据的物理媒体. 在这一层,数据的单位称为比特(b ...
- unity, StartCoroutine and StopCoroutine
startCoroutine("func",1.0f)可以用stopCoroutine("func")来停. startCoroutine(func(1.0f) ...
- mysqldump全量备份+mysqlbinlog二进制日志增量备份
日常的数据备份及恢复测试,是DBA工作重中之重的事情,所以要做好备份及测试,日常的备份常见有mysqldump+binlog备份.xtrabackup+binlog备份,无论那一种,几乎都少不了对bi ...
- Atitit.mysql oracle with as模式临时表模式 CTE 语句的使用,减少子查询的结构性 mssql sql server..
Atitit.mysql oracle with as模式临时表模式 CTE 语句的使用,减少子查询的结构性 mssql sql server.. 1. with ... as (...) 在mys ...
- [c#]分析器错误消息: 发现不明白的匹配。
(1)同样的变量名称 protected System.Web.UI.WebControls.Label lbltitle; protected System.Web.UI.WebControls.L ...
- Secure REST API with oauth2 (翻译)
http://blog.csdn.net/haiyan_qi/article/details/52384734 ******************************************** ...