js checkbox获取选中的值

最新推荐文章于 2021-10-30 15:24:50 发布

ailuqu4750

最新推荐文章于 2021-10-30 15:24:50 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zerohu/p/5271282.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*设置css样式*/
    
    div.box {
        width: 300px;
        padding: 20px;
        margin: 20px;
        border: 4px dashed #ccc;
    }
    
    div.box span {
        color: #999;
        font-style: italic;
    }
    
    div.content {
        width: 250px;
        margin: 10px 0;
        padding: 20px;
        border: 2px solid #ff6666;
    }
    
    input[type='checkbox'] {
        margin: 5px;
    }
    
    input[type='button'] {
        height: 30px;
        margin: 10px;
        padding: 5px 10px;
    }
    /*编写jquery代码*/
    </style>
    <script src="../jquery/jquery.min.js"></script>
    <script>
    $(function() {
        // 设置属性值
        $("input:button").click(function() {
            var fruit = "";
            var vegetable = "";
            $("input:checkbox[name='fruit']:checked").each(function() {
                fruit += $(this).val() + " ";
            });
            $("input:checkbox[name='vegetable']:checked").each(function() {
                vegetable += $(this).val() + " ";
            });
            alert("已选择水果：" + fruit + "，已选择蔬菜：" + vegetable);

        });
    })
    </script>
</head>

<body>
    <div class="box">
        <span>请输入用户名，限定字母、数字或下划线的组合：</span>
        <br>
        <div class="content">
            <span>水果：</span>
            <br>
            <input type="checkbox" name="fruit" value="梨子" />梨子
            <input type="checkbox" name="fruit" value="李子" />李子
            <input type="checkbox" name="fruit" value="栗子" />栗子
            <input type="checkbox" name="fruit" value="荔枝" />荔枝
            <br>
            <span>蔬菜：</span>
            <br>
            <input type="checkbox" name="vegetable" value="青菜" />青菜
            <input type="checkbox" name="vegetable" value="萝卜" />萝卜
            <input type="checkbox" name="vegetable" value="土豆" />土豆
            <input type="checkbox" name="vegetable" value="茄子" />茄子
        </div>
        <input type="button" value="提交">
    </div>
</body>

</html>

转载于:https://www.cnblogs.com/zerohu/p/5271282.html

ailuqu4750

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js checkbox获取选中的值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*设置css样式*/ div.box {...
复制链接

扫一扫