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存储、去空格的更多相关文章

  1. 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. 11.8 开课二个月零四天 (Jquery取属性值,做全选,去空格)

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. 复选框(checkox)全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  4. jQuery对复选框(checkbox)的全选,全不选,反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  5. jQuery实现checkbox(复选框)选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  6. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  7. Android开发CheckBox控件,全选,反选,取消全选

    在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...

  8. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  9. bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. eharts入门篇一

    1.导入文件样式 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本. 2,引入 ECharts 文件  < ...

  2. 百度开源上传组件WebUploader的formData动态传值技巧

    基于Web页面的文件上传一直是互联网应用开发中避免不了的,从asp时代的AspUpload组件.到asp无组件上传,到.Net时代的FileUpload,再到HTML5时代的各种基于jQuery的上传 ...

  3. 线下市场,选择微信小程序从未显得如此重要

    2017 年 1 月 9 日,小程序正式上线,到今日,3 月 8 号,这个新产品面世刚好满两个月.小程序刚推出便受到全球关注,腾讯股价当天即创逾一个月高位,但关注度先是急速上涨,不久便迅速降温,甚至在 ...

  4. Session攻击(会话劫持+固定)与防御

    1.简介 Session对于Web应用无疑是最重要的,也是最复杂的.对于web应用程序来说,加强安全性的第一条原则就是 – 不要信任来自客户端的数据,一定要进行数据验证以及过滤,才能在程序中使用,进而 ...

  5. 利用GDB进行多线程调试

    一.多线程调试 多线程调试重要就是下面几个命令: info thread 查看当前进程的线程. thread <ID> 切换调试的线程为指定ID的线程. break file.c:100 ...

  6. OSI七层模型学习笔记

    1.简介 什么是OSI模型呢? OSI模型全名Open System InterConnect 即开放式系统互联,是国际标准化组织(ISO)提出的一个试图使各种计算机在世界范围内互连为网络的标准框架, ...

  7. poj3264线段数求最大最小值

    链接:https://vjudge.net/contest/66989#problem/G 完完全全的水题,还是被坑了,一个return忘了写,de了半天bug!! #include<iostr ...

  8. 详解MySQL存储过程的“异常处理”

    阅读目录:存储过程的异常处理 定义异常处理 单一异常处理程序 continue exit 多个异常处理程序 关于错误编号和SQLSTATE码 使用3个处理程序 忽略某一异常的处理 异常处理的命名 异常 ...

  9. 【Android Widget】FragmentTabHost

    android.support.v4包里面提供了FragmentTabHost用来替代TabHost,FragmentTabHost内容页面支持Fragment,下面我们就通过示例来看他的用法 效果图 ...

  10. macOS10.12部署sonarqube5.6.3 + mysql5.7.17

    所需安装包已全部上传云盘:https://pan.baidu.com/s/1i5LvOCd 密码:s47e 1. 安装mysql 下载云盘的dmg包,一路默认安装,注意:一定要记住最后一步弹出的默认密 ...