jQuery checkbox全选/取消全选实现代码

2016-02-19 14:37 6 1 收藏

今天图老师小编给大家精心推荐个jQuery checkbox全选/取消全选实现代码教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

jQuery版本:1.3.2

代码如下:
html
head
script src="jquery-1.3.2.min.js" type="text/javascript"/script
/head
body
input type="checkbox" name="chk_list" id="chk_list_1" value="1" /1br /
input type="checkbox" name="chk_list" id="chk_list_2" value="2" /2br /
input type="checkbox" name="chk_list" id="chk_list_3" value="3" /3br /
input type="checkbox" name="chk_list" id="chk_list_4" value="4" /4br /
input type="checkbox" name="chk_all" id="chk_all" /全选/取消全选
script type="text/javascript"
$("#chk_all").click(function(){
$("input[name='chk_list']").attr("checked",$(this).attr("checked"));
});
/script
/body
/html

jQuery.attr 获取/设置对象的属性值,如:
代码如下:
$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态(是否选中)
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

再如:
代码如下:
$("#img_1").attr("src","test.jpg"); //设置ID为img_1的imgsrc的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的imgsrc值

下面的代码是获取上面实例中选中的checkbox的value值:
代码如下:
script type="text/javascript"
//获取到所有name为'chk_list'并选中的checkbox(集合)
var arrChk=$("input[name='chk_list][checked]");
//遍历得到每个checkbox的value值
for (var i=0;iarrChk.length;i++)
{
alert(arrChk[i].value);
}
/script

哪位高手能把上面遍历的过程用$.each()写出来,不胜感激。

来源:http://www.tulaoshi.com/n/20160219/1607372.html

延伸阅读
标签: Web开发
控制表单元素: 文本框,文本区域: $("#txt").attr("value")或者$("#txt").val()//获取值 $("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容 多选框checkbox: $("#checkbox_id").attr("value")或者$("#checkbox_id").val();//获取值 $("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked...
标签: Web开发
代码如下: !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" / style type="text/css" #newsTable{margin:100px auto;} /style scrip...
标签: Web开发
一 、Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" head     title全选,不全选,反选/title     script src="js/jquery.js" type="text/javascript"/script     script lang...
标签: Web开发
代码如下: !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 titlejquery分页控件/title script src="jquery-1.3.min.js" type="text/javascript"/script /head body div class="pager"/div !--div s...

经验教程

698

收藏

98
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部