移动端复选框自定义样式及功能实现逻辑及代码

首先我们来看一下最终的实现效果：

实现的功能有：

• 改变复选框的样式
• 全选与每一项选择的关联关系(当全选的时候将所有的复选框都选中，一个一个选然后每一个都被选中时全选也变成选中状态)
• 统计选中的数量
• 选中后所在行给特殊样式
• 记录选中行的关键信息
  
  

代码实现逻辑

1.初始化数据

constructor(props) {
	super(props);
	this.state = {
		dataSource: [],		// 你的数据
		selectedIds: [],	// 用来存放选中数据的id
	}
}

2.我们的每一行数据都是通过指定的数据来循环渲染出来的，所以我们需要造一个模板用来展示数据：

复选框样式文件：
index.less

.labelStyle {
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: block;
  position: relative;
  padding-left:20px;
  box-sizing: border-box;
  color: #999;

  &::after{
    content: "";
    border:1px solid #999;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 15px;
    left: 0px;
    border-radius: 50%;
  }
  &::before{
    content:"";
    //border-radius: 50%;
    display: block;
    position: absolute;
    top: 18px;
    left: 3px;
    opacity: 0;
  }
}

label input:checked + .labelStyle:after{
  border-color: #1BC0CB;
  background-color: #1BC0CB;
}

label input:checked + .labelStyle:before{
  opacity: 1;
  transition: opacity 0.2s ease;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  width: 13px;
  height: 9px;
  transform: rotate(-45deg) translateY(2px);
  z-index: 2;
}

label input:checked + .labelStyle{
  color: #28ced4;
  transition: color 0.6s ease;
}

.visibleInput {
  display: none;
}

// 引入样式
import listStyles from './index.less';

// 根据数据反复的return出此组件，比如我们是根据dataSource生成数据
{
	dataSource.forEach(obj => {
		return (
			<div>
			  // 复选框
			  <label>
				<input
				   name="checkInput"
				   type="checkbox"
				   className={listStyles.visibleInput}
				   checked={this.state.selectedIds.includes(obj.id)}
				   onChange={() => {	// 改变复选框状态
				     const newSelectedIds = this.state.selectedIds.slice();
				     const idIndex = this.state.selectedIds.indexOf(obj.id);
				     (idIndex === -1)
				       ? newSelectedIds.push(obj.id)
				       : newSelectedIds.splice(idIndex, 1)
				     this.setState({ selectedIds: newSelectedIds });
				   }}
				 />
				 <span className={listStyles.labelStyle} />
			   </label>
			   <div>
			       // 这里放你用来展示的数据结果
			   </div>
			 </div>
		)
	})
}

3.全选复选框的功能实现：

<label>
  <input
    name="checkInput"
    type="checkbox"
    checked={this.state.selectedIds.length === this.state.dataSource.length}
    onChange={e => this.setState({ selectedIds: (e.target.checked) ? this.state.dataSource.map(item => item.id) : [] })}
    className={listStyles.visibleInput}
  />
  <span
    className={listStyles.labelStyle}
    style={{
      width: '70px',
      lineHeight: '48px',
    }}
  ><span style={{ marginLeft: '8px', letterSpacing: '2px', color: '#878787' }}>全选</span>
  </span>
</label>

4.已选中数据的数量：

<div>
	合计：<span style={{ color: '#56c1ed' }}>{this.state.selectedIds.length}</span>件明细
</div>

这样功能就都实现了，如果遇到了什么问题请在下方评论。

标签：自定义,样式,复选框,state,全选,选中,selectedIds,border
来源： https://blog.51cto.com/u_15275953/2928448