您的位置：首页 > Web前端 > JavaScript

粗糙版原生js实现选择限定个数的复选框测试match方法

2018-01-16 18:12 627 查看
<script type="text/javascript">

    function $(id) {

        return document.getElementById(id);

    }

    var inputs = document.getElementsByName("inputcheckbox[]");

    var max_obj = 5;

    var p = 0;

    function checkbox(obj) {

        if (obj.checked) {

            p++;

            for (var i = 0; i < $('form').elements.length; i++) {

                var e = $('form').elements[i];

                if (p == max_obj) {

                    if (e.name.match('inputcheckbox') && !e.checked) {

                        e.disabled = true;

                    }

                }

            }

            $('count1').value = p;

        } else {

            p--;

            for (var i = 0; i < $('form').elements.length; i++) {

                var e = $('form').elements[i];

                if (e.name.match('inputcheckbox') && e.disabled) {

                    e.disabled = false;

                }

            }

            $('count1').value = p;

        }

        $('pollsubmit').disabled = p <= max_obj && p > 0 ? false : true;

    }

</script>

<body>

    <hr>

    <form id="form" method="post" action="">请选择：

        <br>

        <input type="checkbox" name="inputcheckbox[]" onclick="checkbox(this)">1

        <br>

        <input type="checkbox" name="inputcheckbox[]" onclick="checkbox(this)">2

        <br>

        <input type="checkbox" name="inputcheckbox[]" onclick="checkbox(this)">3

        <br>

        <input type="checkbox" name="inputcheckbox[]" onclick="checkbox(this)">4

        <br>

        <input type="checkbox" name="inputcheckbox[]" onclick="checkbox(this)">5

        <br>

        <input type="checkbox" name="inputcheckbox[]" onclick="checkbox(this)">6

        <br>

        <input type="checkbox" name="inputcheckbox[]" onclick="checkbox(this)">7

        <br>

        <button type="submit" disabled="disabled" id="pollsubmit" value="true">提交</button>

    </form>

    <div>

        <input type="text" name="count1" id="count1" value="0">/

        <input type="text" name="" id="count2" value="5">

    </div>

</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航