Home > Article > Web Front-end > Checkbox implements click event to trigger content change of span element

Checkbox implements click event to trigger content change of span element

一个新手Original: 2017-09-29 10:07:071789browse

<!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>

The above is the detailed content of Checkbox implements click event to trigger content change of span element. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference between empty and remove in DOM node deletionNext article：The difference between empty and remove in DOM node deletion

See more

Checkbox implements click event to trigger content change of span element

Related articles