Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值
<!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>无标题文档</title>
<!--引入jquery包-->
<script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" value="01" class="ck" />
<input type="checkbox" value="02" class="ck" />
<input type="checkbox" value="03" class="ck" />
<input type="checkbox" value="04" class="ck" />
<input type="checkbox" value="05" class="ck" />
<input type="button" value="取选中" id="btn" /> <script type="text/jscript">
//取复选框的选中值
$("#btn").click(function(){ var ck = $(".ck");
for(var i=0;i<ck.length;i++)
{
//判断选中
/*if(ck[i].checked)
{
alert(ck[i].value);//js方法
}*/
if(ck.eq(i).prop("checked"))//prop判断是否选中
{
alert(ck.eq(i).val());
} } })
</script> </body>
</html>
2.取下拉列表里面的属性值
<!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>无标题文档</title>
<!--引入jquery包-->
<script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
<style type="text/css">
</style>
</head>
<body>
<select id="sel">
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
</select>
<input type="button" value="取下拉" id="b1" /> <script type="text/jscript">
$("#b1").click(function(){ alert($("#sel").val()); })
</script> </body>
</html>
3.取单选钮的属性值
<!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>无标题文档</title>
<!--引入jquery包-->
<script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
<style type="text/css">
</style>
</head>
<body>
<input class="ck" type="radio" value="01" class="rd" name="a" />
<input class="ck" type="radio" value="02" class="rd" name="a" />
<input class="ck" type="radio" value="03" class="rd" name="a" />
<input class="ck" type="radio" value="04" class="rd" name="a" />
<input class="ck" type="radio" value="05" class="rd" name="a" /> <input type="button" value="取单选" id="b2" /> <script type="text/jscript">
$("#b2").click(function(){
var ck = $(".ck");
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).prop("checked"))//prop判断是否选中
{
alert(ck.eq(i).val());
} } })
</script> </body>
</html>
4.jquery做全选按钮
<!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>无标题文档</title>
<!--引入jquery包-->
<script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" id="qx" />全选
<input type="checkbox" value="01" class="ck" />
<input type="checkbox" value="02" class="ck" />
<input type="checkbox" value="03" class="ck" />
<input type="checkbox" value="04" class="ck" />
<input type="checkbox" value="05" class="ck" /> <script type="text/jscript"> $("#qx").click(function(){ /*if($(this)[0].checked)
{
$(".ck").attr("checked","checked")
}
else
{
$(".ck").removeAttr("checked");
}*///标记的这段代码中存在bug，不能用来做全选，要记住。用下面2行代码。
var xz = $(this).prop("checked")//xz接收的值是true（选中）或者flase（未选中）
$(".ck").prop("checked",xz)//如果是选中，就是true
}) </script> </body>
</html>
5.js或jquery里面有数据存储方式
存储数据的名字叫做JSON
var json = {code:"n001",name:"张三",js:{c:"p001",n:"回族"}};//定义方式。定义比较随便，可以往里面放任意数据。
//取值
//alert(json.code)//取值方式
//alert(json.js.n)
//alert(json["name"])
6.去空格
var str= " hello ";
str = str.trim();//不加取空格输出的长度是10，包含空格的长度。去掉空格输出的长度为5.
alert(str.length)
Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格的更多相关文章
- 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 11.8 开课二个月零四天 （Jquery取属性值，做全选，去空格）
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 复选框（checkox）全选、全不选、反选、获得选中项值的用例
HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...
- jQuery对复选框（checkbox)的全选，全不选，反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- jQuery实现checkbox（复选框）选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- Android开发CheckBox控件，全选，反选，取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- 初窥GPFS文件系统
作者:姜江 linuxemacs@gmail.com 原文地址:http://blog.csdn.net/jznsmail/article/details/5502840?reload 本作品采用知识 ...
- js 数字递增特效 仿支付宝我的财富 HTML5
上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用. ...
- 如果非的让我引起大家的狂拍，那我说一句PHP是世界上最好的语言？
如果你进来了,那就达到了我的目的. 不知不觉.net已经用了3年之久,从最初的的小白到现在的大白,总有一种要骂娘的冲动,.net这一路走来现在越走越迷茫,不知道微软的重心在哪里,一直发现不了他的亮点所 ...
- Java scheduled executor
A typical usage of java scheduled executor looks like this ScheduledExecutorService executor = Execu ...
- java文件的读写操作
java文件的读写操作主要是对输入流和输出流的操作,由于流的分类很多,所以概念很容易模糊,基于此,对于流的读写操作做一个小结. 1.根据数据的流向来分: 输出流:是用来写数据的,是由程序(内存)--- ...
- 每天一道Java题[3]
问题 为什么在重写equals()方法的同时,必须重写hashCode()方法? 解答 在<每天一道Java题[2]>中,已经对hashCode()能否判断两个对象是否相等做出了解释.eq ...
- 用ajax写分页查询-----2017-05-17
要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...
- python课时二
通过上个博客的学习,相信大家已经对Python是什么东西应该有了相对应的了解,这里也包括Python的一些语法(比如Python在写for循环和if判断的时候都是会有缩进的).这张博客大概会对Pyth ...
- 一个使用openGL渲染的炫丽Android动画库二（碎片化曲面动画）
续一个使用openGL渲染的炫丽Android动画库 MagicSurfaceView v1.1.0发布, 新增碎片化曲面动画 地址:https://github.com/gplibs/android ...
- SparkMLlib学习分类算法之逻辑回归算法
SparkMLlib学习分类算法之逻辑回归算法 (一),逻辑回归算法的概念(参考网址:http://blog.csdn.net/sinat_33761963/article/details/51693 ...