h5如何将单选框变成复选框

将单选框变成复选框需要修改HTML代码和CSS样式。

1. 修改HTML代码：
将单选框的input标签的type属性值从"radio"修改为"checkbox"。

例如，原来的单选框代码：

<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female

改为复选框代码：

<input type="checkbox" name="gender" value="male">Male
<input type="checkbox" name="gender" value="female">Female

2. 修改CSS样式：
复选框需要显示为方框，而不是原来的圆点。我们需要使用CSS样式修改复选框的外观。可以使用伪类选择器:checked来设置选中状态下的样式。

例如：

input[type="checkbox"] {
  /* 隐藏原始选择框 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 制作方框 */
  border: 2px solid #999;
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  border-radius: 3px;
  margin-right: 5px;
}

/* 选中状态的样式 */
input[type="checkbox"]:checked::before {
  content: "\2714";
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 1px;
  line-height: 18px;
  font-size: 14px;
  color: #fff;
  padding: 0 3px;
  background-color: #4CAF50;
  border-radius: 3px;
}

上面的样式代码将复选框修改为了方框样式，并使用checked伪类选择器来设置选中状态下的样式。

完整的修改后的代码如下：

<input type="checkbox" name="gender" value="male" id="maleCheck"><label for="maleCheck">Male</label>
<input type="checkbox" name="gender" value="female" id="femaleCheck"><label for="femaleCheck">Female</label>

<style>
input[type="checkbox"] {
  /* 隐藏原始选择框 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 制作方框 */
  border: 2px solid #999;
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  border-radius: 3px;
  margin-right: 5px;
}

/* 选中状态的样式 */
input[type="checkbox"]:checked::before {
  content: "\2714";
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 1px;
  line-height: 18px;
  font-size: 14px;
  color: #fff;
  padding: 0 3px;
  background-color: #4CAF50;
  border-radius: 3px;
}
</style>

注意，为了使复选框和文字可以一起使用，我们使用了label标签，并将for属性设置为相应的复选框的id值。这样点击文字就可以选中相应的复选框。