纯JS打造网页中checkbox和radio的美化效果

让我来详细讲解一下“纯JS打造网页中checkbox和radio的美化效果”的完整攻略。

让我来详细讲解一下“纯JS打造网页中checkbox和radio的美化效果”的完整攻略。

1. 美化checkbox

1.1 隐藏原生checkbox

首先，需要隐藏原生的checkbox，在CSS文件中添加以下样式：

input[type="checkbox"] {
  visibility: hidden;
  position: absolute;
}

1.2 创建替代元素

创建一个<span>元素作为替代，用于显示checkbox的状态。

<label class="checkbox">
  <input type="checkbox" name="checkbox">
  <span></span>
  Checkbox
</label>

1.3 添加样式

为替代元素添加样式，用于显示checkbox的状态。在CSS文件中添加以下样式：

.checkbox {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  margin-right: 15px;
  line-height: 30px;
  cursor: pointer;
  font-size: 16px;
}

.checkbox input[type="checkbox"]:checked + span:before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 18px;
  color: #2ecc71;
  position: absolute;
  left: 0;
  top: 0;
}

.checkbox input[type="checkbox"] + span:before {
  content: '\f00d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 18px;
  color: #ccc;
  position: absolute;
  left: 0;
  top: 0;
}

以上样式是基于Font Awesome字体库的，简化了checkbox美化的过程。

1.4 实现交互效果

为了实现交互效果，我们需要添加JS代码，为替代元素添加点击事件，同时改变隐藏的checkbox的选中状态。

const checkboxes = document.querySelectorAll('.checkbox input[type="checkbox"]');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    const isChecked = this.checked;
    const icon = this.nextElementSibling;
    icon.classList.toggle('checked');
    this.checked = !isChecked;
  });
});

以上代码用于为每个替代元素添加点击事件，同时切换替代元素的状态，并且改变隐藏的checkbox的选中状态。

2. 美化radio

美化radio的过程和美化checkbox类似，具体步骤如下：

2.1 隐藏原生radio

input[type="radio"] {
  visibility: hidden;
  position: absolute;
}

2.2 创建替代元素

<label class="radio">
  <input type="radio" name="radio">
  <span></span>
  Radio
</label>

2.3 添加样式

.radio {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  margin-right: 15px;
  line-height: 30px;
  cursor: pointer;
  font-size: 16px;
}

.radio input[type="radio"] + span:before {
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  top: 4px;
}

.radio input[type="radio"]:checked + span:before {
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #2ecc71;
  border: 2px solid #2ecc71;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  top: 4px;
}

2.4 实现交互效果

const radios = document.querySelectorAll('.radio input[type="radio"]');

radios.forEach(radio => {
  radio.addEventListener('click', function() {
    const isChecked = this.checked;
    this.checked = !isChecked;

    if(isChecked) {
      const radiosWithSameName = document.querySelectorAll(`input[type="radio"][name="${this.name}"]`);
      radiosWithSameName.forEach(radio => radio.nextElementSibling.classList.remove('checked'));
    }

    this.nextElementSibling.classList.toggle('checked');
  });
});

以上代码用于为每个替代元素添加点击事件，同时切换替代元素的状态，并且改变隐藏的radio的选中状态。这里需要注意的是，点击radio时需要把同名的radio的状态都改为未选中状态。