[前端] checkbox选择统计和input输入监测

最新推荐文章于 2019-06-09 20:29:44 发布

天空还下着雪

最新推荐文章于 2019-06-09 20:29:44 发布

阅读量1k

点赞数

分类专栏：前端文章标签： web前端开发

本文链接：https://blog.csdn.net/u010081689/article/details/45966119

版权

前端专栏收录该内容

154 篇文章 0 订阅

订阅专栏

表单常用，代码简单

效果：

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form之checkbox、input</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .btn-confirm {
        height: 42px;
        padding: 0 30px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #f5f5f5;
        cursor: pointer;
    }
    .btn-confirm.error {
        background: #e00;
        border: 1px solid #c00;
        color: #fff;
    }
    .input {
        width: 250px;
        height: 40px;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #fff;
        line-height: 42px;
    }
    </style>
</head>
<body>
    <form action="">
        <span class="count">选择盒数：</span><br>
        <label for="type1"><input id="type1" name="type" type="checkbox">一盒</label>
        <label for="type2"><input id="type2" name="type" type="checkbox">二盒</label>
        <label for="type3"><input id="type3" name="type" type="checkbox">三盒</label>
        <label for="type4"><input id="type4" name="type" type="checkbox">四盒</label>
        <input class="input" type="text" placeholder="电话号码">
        <button class="btn-confirm" type="button">确定</button>
    </form>

    <script type="text/javascript">
    $(function() {  

        /* 复选框 */
        var countText = $('.count').text();
        $('.btn-confirm').click(function() {
            if($(':checked').length == 0) {
                alert('未选择！');
            } else {
                $('.count').text(countText+$(':checked').length);
            }
        });

        /* 输入框输入时会监听输入的字符数 */
        $('.input').on('input', function() {
            if($(this).val().length > 11) {
                alert('电话号码超出11位!');
                $('.btn-confirm').addClass('error');
            } else {
                $('.btn-confirm').removeClass('error');
            }
        });

    });
    </script>
</body>
</html>

欢迎关注技术开发分享录：http://fenxianglu.cn/

天空还下着雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
[前端] checkbox选择统计和input输入监测

表单常用，代码简单效果：代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>form之checkbox、input</title> <script src="jq...
复制链接

扫一扫