一组checkbox 功能实现

最新推荐文章于 2023-06-14 09:08:56 发布

hahei2020

最新推荐文章于 2023-06-14 09:08:56 发布

阅读量2.2k

点赞数

文章标签： html checkbox

本文链接：https://blog.youkuaiyun.com/hahei2020/article/details/77072892

版权

Web前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在HTML和前端JavaScript中实现一组checkbox的功能。强调了在实现过程中应注意的细节，特别是避免使用某些可能导致问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写后台时，会需要实现“一组checkbox”的功能，例如：

html：

<p>
  <label for="zoneID">区服选择</label>
  <input type="text" name="zoneID" id="zoneID" readonly>
      <ul class="myList" id="zoneIDList" style="display: none;">
          <li><input type="checkbox" id="allServer">全选</li>
          <li><input type="checkbox" name="zoneIDCheckbox" class="subServer" value="10001">10001</li>
          <li><input type="checkbox" name="zoneIDCheckbox" class="subServer" value="10002">10002</li>
          <li><input type="checkbox" name="zoneIDCheckbox" class="subServer" value="10003">10003</li>
          <li><input type="checkbox" name="zoneIDCheckbox" class="subServer" value="10004">10004</li>
      </ul>
</p>

前端js实现：

// 复选框 显示 及 隐藏
$(document).ready(
    $('#zoneID').focus(function () {
        $('#zoneIDList').show();
    }),
);

// 区服选择 全选，取消全选，单选 实现
$(document).ready(function () {
// 判断 全选 是否取消
    var $subBox = $("input[type=checkbox][name='zoneIDCheckbox']");
    $subBox.click(function () {
        $('#allServer').prop('checked', $subBox.length == $subBox.filter(':checked').length ? true : false);
    });

// 全选 取消全选 功能
    $(document).on('click', '#allServer', function () {
        if ( $('#allServer').is(':checked')) {
            var text = '';

            $('.subServer').each(function () {
                $("input[type=checkbox][name='zoneIDCheckbox']").prop('checked', true);  // 全选

                var value = $(this).val();
                var checked = $(this).is(':checked');
                if (checked) {
                    text += value + '|';
                }
                $('#zoneID').val(text);
            });

        } else {
            $('.subServer').each(function () {
                $("input[type=checkbox][name='zoneIDCheckbox']").prop('checked', false);
                $('#zoneID').val('');
            })
        }
    });

// 单选 功能
    $(document).on('click', '.subServer', function () {
        var text = '';
        $('.subServer').each(function () {
            var value = $(this).val();
            var checked = $(this).is(':checked');
            if (checked) {
                text += value + '|';
            }
            $('#zoneID').val(text);
        })
    })
});