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