使用jquery与图片美化checkbox和radio控件的代码(打包下载)

请看下面的完整攻略。

使用jQuery与图片美化Checkbox和Radio控件的代码

简介

本文介绍如何使用jQuery和自定义图片样式来美化HTML复选框和单选框控件。通过这种方式，我们可以根据我们的设计需要来控制这些控件的外观和行为。同时，我们也可以使用相同的代码来实现跨浏览器兼容性。

步骤

以下是实现美化Checkbox和Radio控件的步骤：

下载并引入jQuery库。可以从官方网站 https://jquery.com/ 下载最新的版本，或直接使用CDN引入。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

准备自定义的Checkbox和Radio图片。

在此示例中，我们将使用“checkbox.png”和“radio.png”两张自定义图片来替代浏览器原生的控件样式。请确保图片大小和样式符合您的设计需要。

创建HTML结构。

<label>
  <input type="checkbox" class="custom-checkbox">
  Option 1
</label>

<label>
  <input type="radio" name="radio-group" class="custom-radio">
  Option 1
</label>

<label>
  <input type="radio" name="radio-group" class="custom-radio">
  Option 2
</label>

在这个示例中，我们为每个控件的标签添加了一个label元素，并使用label元素来包裹控件本身以及控件的文本标签。

添加CSS样式。

/* 隐藏原生控件样式 */
.custom-checkbox,
.custom-radio {
  height: 0;
  width: 0;
  opacity: 0;
  position: absolute;
}

/* 定义自定义样式 */
.custom-checkbox + label,
.custom-radio + label {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 14px;
  padding-left: 25px;
}

.custom-checkbox + label {
  background-image: url('checkbox.png');
}

.custom-radio + label {
  background-image: url('radio.png');
}

/* 当控件选中时，修改样式 */
.custom-checkbox:checked + label {
  background-image: url('checkbox-checked.png');
}

.custom-radio:checked + label {
  background-image: url('radio-checked.png');
}

在这个示例中，我们首先将原生控件隐藏，然后定义了自定义控件的样式。我们设置了控件的高度、宽度为0并隐藏，将label元素设置为可点击的，并给label元素添加了自定义的背景图片，并设置了样式。当控件选中时，我们修改了label元素的背景图片。

编写JavaScript代码

$(function() {
  $('.custom-checkbox, .custom-radio').change(function() {
    $(this).trigger('updateStyle');
  });

  $('.custom-checkbox, .custom-radio').on('updateStyle', function() {
    var $this = $(this);
    var checked = $this.is(':checked');
    var label = $this.next('label');
    if (checked) {
      label.addClass('checked');
    } else {
      label.removeClass('checked');
    }
  });
});

在这个示例中，我们使用jQuery来监听自定义控件的change事件。当一个控件的状态发生变化时，我们触发一个自定义事件updateStyle。在这个事件的回调函数中，我们使用jQuery来获取控件的状态，并修改label元素的样式类名。

现在，您已经准备好用自定义的图片和CSS样式美化HTML复选框和单选框控件。

示例说明

示例1：使用自定义图片和样式来美化Checkbox

请看下面的代码：

<div class="example1">
  <!-- HTML结构 -->
  <label>
    <input type="checkbox" class="custom-checkbox">
    Option 1
  </label>
  <label>
    <input type="checkbox" class="custom-checkbox">
    Option 2
  </label>
  <label>
    <input type="checkbox" class="custom-checkbox">
    Option 3
  </label>
</div>

<style>
  /* CSS样式 */
  .example1 .custom-checkbox,
  .example1 .custom-radio {
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
  }

  .example1 .custom-checkbox + label,
  .example1 .custom-radio + label {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 14px;
    padding-left: 25px;
  }

  .example1 .custom-checkbox + label {
    background-image: url('checkbox.png');
  }

  .example1 .custom-checkbox:checked + label {
    background-image: url('checkbox-checked.png');
  }
</style>

<script>
  // JavaScript代码
  $(function() {
    $('.example1 .custom-checkbox').change(function() {
      $(this).trigger('updateStyle');
    });

    $('.example1 .custom-checkbox').on('updateStyle', function() {
      var $this = $(this);
      var checked = $this.is(':checked');
      var label = $this.next('label');
      if (checked) {
        label.addClass('checked');
      } else {
        label.removeClass('checked');
      }
    });
  });
</script>

在这个示例中，我们使用了示例3中提到的方法来美化了HTML复选框控件。我们创建了一个包含3个选项的复选框组，使用了自定义的CSS样式和图片。当用户勾选一个选项时，我们使用JavaScript代码来改变该选项的样式。

示例2：使用自定义图片和样式来美化Radio

请看下面的代码：

<div class="example2">
  <!-- HTML结构 -->
  <label>
    <input type="radio" class="custom-radio" name="example2-group">
    Option 1
  </label>
  <label>
    <input type="radio" class="custom-radio" name="example2-group">
    Option 2
  </label>
  <label>
    <input type="radio" class="custom-radio" name="example2-group">
    Option 3
  </label>
</div>

<style>
  /* CSS样式 */
  .example2 .custom-radio {
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
  }

  .example2 .custom-radio + label {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 14px;
    padding-left: 25px;
  }

  .example2 .custom-radio + label {
    background-image: url('radio.png');
  }

  .example2 .custom-radio:checked + label {
    background-image: url('radio-checked.png');
  }
</style>

<script>
  // JavaScript代码
  $(function() {
    $('.example2 .custom-radio').change(function() {
      $(this).trigger('updateStyle');
    });

    $('.example2 .custom-radio').on('updateStyle', function() {
      var $this = $(this);
      var checked = $this.is(':checked');
      var label = $this.next('label');
      if (checked) {
        $('.example2 .custom-radio:checked').not($this).removeAttr('checked').next('label').removeClass('checked');
        label.addClass('checked');
      } else {
        label.removeClass('checked');
      }
    });
  });
</script>

在这个示例中，我们使用了示例3中提到的方法来美化了HTML单选框控件。我们创建了一个包含3个选项的单选框组，使用了自定义的CSS样式和图片。当用户选中一个选项时，我们使用JavaScript代码来改变该选项的样式，并取消其他选项的选中状态。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用jquery与图片美化checkbox和radio控件的代码(打包下载) - Python技术站