首页 >web前端 >js教程 >checkbox实现click事件触发span元素内容改变

checkbox实现click事件触发span元素内容改变

一个新手
一个新手原创
2017-09-29 10:07:071802浏览


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script src="jquery.js"></script>
</head>
<body>
<p>我想去<span id="spanId">_____</span></p>
<form action="#" id="form">
    <input type="checkbox" name="city" value="南京">南京    
    <input type="checkbox" name="city" value="北京">北京    
    <input type="checkbox" name="city" value="纽约">纽约</form>
<script>
        $(function () {
            $("input[name=city]").click(function () {                
            var arr = [];
                $("input[name=city]").each(function () {                    
                if(this.checked){
                        arr.push(this.value);
                    }else{                        
                    var index = arr.indexOf(this.value);                        
                    if(index != -1){
                            arr[index] = "";
                        }
                    }
                });
                $("#spanId").text(arr.join(","));
            })
        });</script>
</body>
</html>

以上是checkbox实现click事件触发span元素内容改变的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn