html自定义复选框

原创

mb638413918930b 2022-11-28 18:27:52 博主文章分类：Web前端 ©著作权

文章标签 html jquery checkbox 复选框自定义checkbox 文章分类 运维

©著作权归作者所有：来自51CTO博客作者mb638413918930b的原创作品，请联系作者获取转载授权，否则将追究法律责任

自定义复选框的素材：

icon-check-circle.png

html自定义复选框_checkbox

icon-checked.png

html自定义复选框_自定义checkbox_02

checkbox.html（为了方便起见，这里使用到了jQuery）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义复选框checkbox</title>
  <style>
    .checkbox {
        cursor: pointer;
        padding-left: 25px;
        color: #000;
        display: inline-block;
        height: 18px;
        line-height: 18px;
    }
    .cb-default {
        background: url(icon-check-circle.png) left top no-repeat;
    }
    .cb-checked {
        background: url(icon-checked.png) left top no-repeat;
    }
  </style>
</head>
<body>
  <p>
    <span class="checkbox cb-default">Remember me</span>
  </p>
  <script src="jquery.min.js"></script>
  <script>
    $('.checkbox').on('click', function() {
            if($(this).hasClass('cb-default')) {
                $(this).removeClass('cb-default').addClass('cb-checked');
            } else {
                $(this).removeClass('cb-checked').addClass('cb-default');
            }
        });
  </script>
</body>
</html>

效果图如下：

未选中状态

html自定义复选框_html_03

选中状态

html自定义复选框_jquery_04

为提交表单时，考虑将复选框的内容进行提交，对上述的自定义复选框进行了如下改进：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义复选框checkbox</title>
  <style>
    .checkbox {
        cursor: pointer;
        color: #000;
        display: inline-block;
    }
    .checkbox span {
      display: inline-block;
      height: 18px;
      line-height: 18px;
      padding-left: 25px;
    }
    .cb-default {
        background: url(icon-check-circle.png) left top no-repeat;
    }
    .cb-checked {
        background: url(icon-checked.png) left top no-repeat;
    }
  </style>
</head>
<body>
  <div class="checkbox">
    <input type="hidden" name="checkInfo" value="0">
    <span class="cb-default">Remember me</span>
  </div>
  <script src="jquery.min.js"></script>
  <script>
    $('.checkbox').on('click', function() {
      $span = $('.checkbox span');
      var input = $('.checkbox input')[0];
            if($span.hasClass('cb-default')) {
                $span.removeClass('cb-default').addClass('cb-checked');
                input.setAttribute('value', 1);
            } else {
                $span.removeClass('cb-checked').addClass('cb-default');
                input.setAttribute('value', 0);
            }
        });
  </script>
</body>
</html>