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

Posted 喵嘻嘻

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了checkbox:click事件触发span元素内容改变相关的知识,希望对你有一定的参考价值。

<!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元素内容改变的主要内容,如果未能解决你的问题,请参考以下文章

checkbox:click事件触发文本框显示隐藏

阻止锚点父元素点击事件

怎样用js触发a标签的click事件

jquery向元素添加点击事件

在自定义控件中,有CheckBox控件,当触发OnCheckedChanged事件时

关于JS 事件冒泡和onclick,click,on()事件触发顺序