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

来源：互联网发布：豆瓣高分网络武侠小说编辑：程序博客网时间：2024/06/05 07:14
表单常用，代码简单
效果：
代码：
<!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>
谢谢关注！
0 0