jquery下checked取值问题的解决方法
更新时间：2012年08月09日 20:59:34 作者：
修改checkbox时..jquery在取checked值时总是出这样那样的问题....各个版本之间还有少许的差异....当向后台发送数据后,,再返回到当前页时..checked的状态始终不对
一怒之下,给checkbox加一个isCheck,,不用那该死的checked属性...一切OK了...代码如下:
<!DOCTYPE html >
<html><head>
<meta charset="UTF-8">
<title>修复checkbox的状态切换和动态取值的问题</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
* {margin:0; padding:0;}
ul li { float:left; list-style:none; margin-left:20px;}
</style>
</head>
<body>
<form name="journal" id="journal" action="#" method="post">
<input name="cate_ids" value="" type="hidden">
<ul>
<li><input checked="checked" isCheck="true" class="ckbox" value="1" name="cate_id" type="checkbox">美食1</li>
<li><input class="ckbox" value="2" name="cate_id" type="checkbox">美食2</li>
<li><input class="ckbox" value="3" name="cate_id" type="checkbox">美食3</li>
<li><input checked="checked" isCheck="true" class="ckbox" value="4" name="cate_id" type="checkbox">美食4</li>
<li><input checked="checked" isCheck="true" class="ckbox" checked="checked" value="5" name="cate_id" type="checkbox">美食5</li>
</ul>
<div class="btn"> <input value="确认" name="sbtn" onclick="getValues()" type="button">
</form>
<script>
//修复checkbox的状态切换和动态取值的问题
//为checkbox新增一个isCheck属性来替换checked属性的不兼容性
$(".ckbox").click(function(){
if($(this).attr("isCheck") == "true") {
$(this).removeAttr("isCheck")
} else {
$(this).attr("isCheck", "true");
}
})
function getValues()
{
var list="";
$(".ckbox").each(function(){
if($(this).attr("isCheck") == "true"){
list += $(this).val() + ",";
}
})
alert(list);
}
</script>
</body>
</html>
复制代码 代码如下:
<!DOCTYPE html >
<html><head>
<meta charset="UTF-8">
<title>修复checkbox的状态切换和动态取值的问题</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
* {margin:0; padding:0;}
ul li { float:left; list-style:none; margin-left:20px;}
</style>
</head>
<body>
<form name="journal" id="journal" action="#" method="post">
<input name="cate_ids" value="" type="hidden">
<ul>
<li><input checked="checked" isCheck="true" class="ckbox" value="1" name="cate_id" type="checkbox">美食1</li>
<li><input class="ckbox" value="2" name="cate_id" type="checkbox">美食2</li>
<li><input class="ckbox" value="3" name="cate_id" type="checkbox">美食3</li>
<li><input checked="checked" isCheck="true" class="ckbox" value="4" name="cate_id" type="checkbox">美食4</li>
<li><input checked="checked" isCheck="true" class="ckbox" checked="checked" value="5" name="cate_id" type="checkbox">美食5</li>
</ul>
<div class="btn"> <input value="确认" name="sbtn" onclick="getValues()" type="button">
</form>
<script>
//修复checkbox的状态切换和动态取值的问题
//为checkbox新增一个isCheck属性来替换checked属性的不兼容性
$(".ckbox").click(function(){
if($(this).attr("isCheck") == "true") {
$(this).removeAttr("isCheck")
} else {
$(this).attr("isCheck", "true");
}
})
function getValues()
{
var list="";
$(".ckbox").each(function(){
if($(this).attr("isCheck") == "true"){
list += $(this).val() + ",";
}
})
alert(list);
}
</script>
</body>
</html>
相关文章
对于javascript事件扩展，所有的lib都差不多。和jquery和prototype,yui和Ext，其要解决的首要问题是兼容性，所有 lib都会对event进行包裹，统一其属性解决其兼容性。2010-06-06
这篇文章主要介绍了JQuery实现级联下拉框效果，需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery中内容过滤器简单用法,结合实例形式分析了jQuery中内容过滤器的相关概念、功能、应用场景及相关使用方法,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了jQuery实现时尚漂亮的弹出式对话框,可实现非常炫目时尚的弹出式对话框功能,非常具有实用价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jQuery实现预加载图片的方法,涉及jQuery操作img的src属性使用技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery中append()方法用法,实例分析了append()方法的功能、定义及在匹配元素的结尾插入指定内容的使用技巧,需要的朋友可以参考下2015-01-01
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？关于它们两个的区别，这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。2015-05-05
在下面的集合中，你会发现很多便利的 jQuery 导航插件和有用的教程，帮助你实现充满吸引力的网站导航，让你网站更有组织性和交互性2012-09-09
Jquery中getJSON在asp.net中的使用说明，需要的朋友可以参考下。2011-03-03
这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下2019-05-05
最新评论