复选框多项选择，并取值

最新推荐文章于 2021-05-26 11:54:15 发布

weixin_34255793

最新推荐文章于 2021-05-26 11:54:15 发布

阅读量172

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/abelkeith/p/8617698.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/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;}
</style>
</head>
<body>
<div class="box">
    <span>请输入用户名，限定字母、数字或下划线的组合：</span>
    <div class="content">
        <span>水果：</span>
        <input type="checkbox" name="fruit" value="梨子"/>梨子
        <input type="checkbox" name="fruit" value="李子"/>李子
        <input type="checkbox" name="fruit" value="栗子"/>栗子
        <input type="checkbox" name="fruit" value="荔枝"/>荔枝
        <span>蔬菜：</span>
        <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>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    //设置属性值
    $("input:button").click(function(){
        var fruit = "";
        var vegetable = "";
        $("input:checkbox[name='fruit']:checked").each(function(){//根据name属性，寻找到元素，对应的checked状态
            fruit += $(this).val() + " ";
        });
        $("input:checkbox[name='vegetable']:checked").each(function(){
            vegetable += $(this).val() + " ";
        });
        alert("已选择水果："+fruit+",已选择蔬菜："+vegetable);
    });

</script>
</html>

转载于:https://www.cnblogs.com/abelkeith/p/8617698.html

weixin_34255793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复选框多项选择，并取值

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">div.box{width:300px;padding:20px;margin:...
复制链接

扫一扫