jquery下checked取值問題的解決方法
更新時(shí)間：2012年08月09日 20:59:34 作者：
修改checkbox時(shí)..jquery在取checked值時(shí)總是出這樣那樣的問題....各個(gè)版本之間還有少許的差異....當(dāng)向后臺(tái)發(fā)送數(shù)據(jù)后,,再返回到當(dāng)前頁(yè)時(shí)..checked的狀態(tài)始終不對(duì)
一怒之下,給checkbox加一個(gè)isCheck,,不用那該死的checked屬性...一切OK了...代碼如下:
<!DOCTYPE html >
<html><head>
<meta charset="UTF-8">
<title>修復(fù)checkbox的狀態(tài)切換和動(dòng)態(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="確認(rèn)" name="sbtn" onclick="getValues()" type="button">
</form>
<script>
//修復(fù)checkbox的狀態(tài)切換和動(dòng)態(tài)取值的問題
//為checkbox新增一個(gè)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>
復(fù)制代碼 代碼如下:
<!DOCTYPE html >
<html><head>
<meta charset="UTF-8">
<title>修復(fù)checkbox的狀態(tài)切換和動(dòng)態(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="確認(rèn)" name="sbtn" onclick="getValues()" type="button">
</form>
<script>
//修復(fù)checkbox的狀態(tài)切換和動(dòng)態(tài)取值的問題
//為checkbox新增一個(gè)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)文章
對(duì)于javascript事件擴(kuò)展，所有的lib都差不多。和jquery和prototype,yui和Ext，其要解決的首要問題是兼容性，所有 lib都會(huì)對(duì)event進(jìn)行包裹，統(tǒng)一其屬性解決其兼容性。2010-06-06
JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
這篇文章主要介紹了JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果，需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery中內(nèi)容過濾器簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了jQuery中內(nèi)容過濾器的相關(guān)概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用方法,需要的朋友可以參考下2018-03-03
jQuery實(shí)現(xiàn)預(yù)加載圖片的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)預(yù)加載圖片的方法,涉及jQuery操作img的src屬性使用技巧,需要的朋友可以參考下
2015-03-03 
這篇文章主要介紹了jQuery中append()方法用法,實(shí)例分析了append()方法的功能、定義及在匹配元素的結(jié)尾插入指定內(nèi)容的使用技巧,需要的朋友可以參考下
2015-01-01 
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？關(guān)于它們兩個(gè)的區(qū)別，這里談?wù)勎业男牡茫业男牡煤芎?jiǎn)單：對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
2015-05-05 
推薦40款強(qiáng)大的 jQuery 導(dǎo)航插件和教程(上篇)
在下面的集合中，你會(huì)發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程，幫助你實(shí)現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航，讓你網(wǎng)站更有組織性和交互性
2012-09-09 
Jquery中g(shù)etJSON在asp.net中的使用說明
Jquery中g(shù)etJSON在asp.net中的使用說明，需要的朋友可以參考下。
2011-03-03 
jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05