用jquery与css打造个性化的单选框和复选框

接下来我会详细讲解用jquery与css打造个性化的单选框和复选框的完整攻略。

简介

传统的HTML单选框和复选框样式固定、不易修改，但我们可以通过jquery和css来制作个性化的单选框和复选框。

原理

• 隐藏原生单选框或复选框
• 通过样式设置伪装的选中状态
• 监听点击事件，通过jquery代码控制真实单选框或复选框的选中状态

单选框

HTML

假设我们有一个基本的单选框HTML代码，如下所示：

<input type="radio" name="option1" value="1" id="option1_1">
<label for="option1_1">选项1</label>
<input type="radio" name="option1" value="2" id="option1_2">
<label for="option1_2">选项2</label>
<input type="radio" name="option1" value="3" id="option1_3">
<label for="option1_3">选项3</label>

CSS

首先，我们需要将单选框隐藏起来。这可以通过CSS的opacity和position属性实现：

input[type="radio"] {
  opacity: 0;
  position: absolute;
}

然后，我们需要用CSS来渲染伪装的选中状态。以下是一个示例CSS样式：

label {
  display: inline-block;
  cursor: pointer;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

input[type="radio"]:checked + label {
  background-color: #ccc;
  color: #fff;
  border-color: #ccc;
}

其中，label被设置为块级元素，cursor属性被设置为指针，background-color、color、border等属性被设置为默认状态。在单选框被选中时，input[type="radio"]:checked + label选择器会匹配选中的单选框后面的label元素，并应用选中状态的CSS属性。

JQuery

最后，我们需要用JQuery来控制单选框的选中状态。以下是一个示例JQuery代码：

$('input[type="radio"]').on('click', function() {
  $('input[name="' + $(this).attr('name') + '"]').next('label').removeClass('checked');
  $(this).next('label').addClass('checked');
});

这段代码监听单选框的点击事件，然后移除同样name属性下的所有选中状态的类名，并为当前点击的单选框对应的label元素添加选中状态的类名。

复选框

与单选框类似，我们也可以制作个性化的复选框。

HTML

基本的复选框HTML代码如下：

<input type="checkbox" name="option2" value="1" id="option2_1">
<label for="option2_1">选项1</label>
<input type="checkbox" name="option2" value="2" id="option2_2">
<label for="option2_2">选项2</label>
<input type="checkbox" name="option2" value="3" id="option2_3">
<label for="option2_3">选项3</label>

CSS

同样，我们需要将复选框隐藏起来：

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

然后，我们需要用CSS来渲染伪装的选中状态。以下是一个示例CSS样式：

label {
  display: inline-block;
  cursor: pointer;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

input[type="checkbox"]:checked + label {
  background-color: #ccc;
  color: #fff;
  border-color: #ccc;
}

与单选框类似，label被设置为块级元素，cursor属性被设置为指针，background-color、color、border等属性被设置为默认状态。在复选框被选中时，input[type="checkbox"]:checked + label选择器会匹配选中的复选框后面的label元素，并应用选中状态的CSS属性。

JQuery

对于复选框，我们需要稍微修改一下JQuery代码来处理多个选项的情况：

$('input[type="checkbox"]').on('click', function() {
  if ($(this).is(':checked')) {
    $(this).next('label').addClass('checked');
  } else {
    $(this).next('label').removeClass('checked');
  }
});

这段代码监听复选框的点击事件，并根据选中状态添加或删除选中状态的类名。

总结

通过上述攻略，我们可以通过jquery和css灵活地制作个性化的单选框和复选框，这不仅增加了网站的美观性和交互性，还为网站用户提供了更好的用户体验。