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

最新推荐文章于 2021-06-03 04:29:52 发布

bing.shao

最新推荐文章于 2021-06-03 04:29:52 发布

阅读量4.3k

点赞数

分类专栏： JavaScirpt技术

JavaScirpt技术专栏收录该内容

46 篇文章 1 订阅

订阅专栏

<!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" οnclick="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>