jquery下checked取值問題的解決方法
更新時間：2012年08月09日 20:59:34 作者：
修改checkbox時..jquery在取checked值時總是出這樣那樣的問題....各個版本之間還有少許的差異....當向后臺發(fā)送數(shù)據(jù)后,,再返回到當前頁時..checked的狀態(tài)始終不對
一怒之下,給checkbox加一個isCheck,,不用那該死的checked屬性...一切OK了...代碼如下:
<!DOCTYPE html >
<html><head>
<meta charset="UTF-8">
<title>修復checkbox的狀態(tài)切換和動態(tài)取值的問題</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的狀態(tài)切換和動態(tài)取值的問題
//為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的狀態(tài)切換和動態(tài)取值的問題</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的狀態(tài)切換和動態(tài)取值的問題
//為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>
相關(guān)文章
這篇文章主要為大家詳細介紹了jquery.pagination.js分頁使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
為了讓本地圖片、遠程圖片、過小的圖片都適應此插件，有很多細節(jié)問題要處理。2009-11-11
jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細介紹了jquery.multiselect 多選下拉框?qū)崿F(xiàn)代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
JQuery Dialog(JS模態(tài)窗口,可拖拽的DIV) 效果實現(xiàn)代碼2010-02-02
用jQuery將元素移除的基本方法常用的有三個，一個是remove()方法，一個是html()方法，一個是empty()方法2014-05-05
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
jquery中append()與appendto()用法分析
這篇文章主要介紹了jquery中append()與appendto()用法分析,以實例的形式分析了jquery中append()與appendto()的具體語法與詳細用法,需要的朋友可以參考下2014-11-11
基于jQuery+HttpHandler實現(xiàn)圖片裁剪效果代碼(適用于論壇, SNS)
上次發(fā)了幾個jQuery的插件和些心得, 很多園友(也許是自己站上的)發(fā)郵件希望能提供更多的源碼, 正好這次有個同學希望在自己的壇子上掛個圖片裁剪以生成頭像的功能, 于是幫忙寫了這么個插件.也許很多園友用得著, 就一并發(fā)上來啦.2011-09-09
這篇文章主要介紹了jQuery UI插件自定義confirm確認框的方法,實例分析了jQuery的UI插件使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了jquery.pager.js分頁的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07