您的位置：首页 > Web前端 > JQuery

修复checkbox的状态切换和动态取值的问题，主要是学会jquery选择或者不选中checkbox

2013-12-27 09:35 609 查看

<!DOCTYPE html >

<html><head>

<meta charset="UTF-8">

<title>修复checkbox的状态切换和动态取值的问题</title>

<script type="text/javascript" src="../static/js/jquery-1.8.0.min.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航