复选框checkbox勾选问题

问题：修复点击div勾选不中复选框的bug

1、label标签可以直接用for，与input的id相同即可选择字体勾选住选框；

<input type="checkbox" id="color1" name="color" value="red" checked={this.props.checked}/><label htmlFor="color1" >red</label>

2、对于没有传递checked的值，可以用onChange事件去完成勾选；

class CheckBox extends React.Component {constructor(props) {super(props);this.state = {value: []};this.handleChange = this.handleChange.bind(this);}handleChange(event) {let item = event.target.value;let items = this.state.value.slice();let index = items.indexOf(item);index === -1 ? items.push(item) : items.splice(index, 1);this.setState({value: items});}render() {return (<div>choose fruit：<br/><label><input type="checkbox" name="fruit" value="apple"onChange={this.handleChange}/>apple</label><br/><label><input type="checkbox" name="fruit" value="banana"onChange={this.handleChange}/>banana</label><br/><label><input type="checkbox" name="fruit" value="pear"onChange={this.handleChange}/>pear</label><br/><div>Chosen : {this.state.value.join('-')}</div></div>)}}

3、对于已经封装好的组件在外层选中选框，可以添加onClick事件；

<div onClick={this.state.choose}><CheckBox />
</div>

代码参考：https://blog.csdn.net/u013910340/article/details/80177291

复选框checkbox勾选问题相关推荐

vue设置多选框默认勾选_Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
el-table复选框全部勾选以及勾选回显
el-table复选框全部勾选以及勾选回显前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存 ...
excel导出时如何根据java后台返回的结果动态实现excel复选框的勾选
现在有一个excel的模板,供导出的时候使用(如下图),我们要根据java后台出从数据库取出的数据动态实现P单元格中复选框的勾选, 如果返回的结果是在职,那么在职复选框就被勾选,以此类推. 问题是我们 ...
Java 根据模板导出Excel时，如何根据后台数据设置复选框的勾选
我之前遇到这个问题,上网查找解决方案.都说要在Excel中设置复选框的链接单元格,然后通过赋值给单元格控制复选框的勾选. 在我设置好链接单元格之后,点击复选框,单元格中的值会改变 TRUE 或 FAL ...
vue设置多选框默认勾选_Vue实现全选和反选即Vue复选框增加全选功能
导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图: 如果网上搜的话,搜的是一堆 ...
PyQt5 复选框（勾选框）
-- coding: utf-8 -- import sys from PyQt5.QtWidgets import QApplication, QWidget, QCheckBox from PyQ ...
复选框JCheckBox勾选改变内容
勾选前勾选后取消勾选–恢复原状贴代码 JCheckBox chckbxNewCheckBox = new JCheckBox("勾选事件");chckbxNewCheckBo ...
vue设置多选框默认勾选_vue中复选框怎么默认全选，至少选择4个才可以点击下一步...
[1]项目中有这样的需求,要怎么解决呢...默认复选框是全选状态,也可以取消某一个状态,至少选择4个选项才可以点击下一步.这个要怎么实现啊 html: 原料进厂模块组装成品质检仓储物流销售 ...
html复选框不能勾选,html – 选中时CSS样式复选框 – 不起作用
我有以下静态html文件,我花时间为我们的客户建立一个CMS Web应用程序站点. 在中间部分,有一个垂直的复选框数组(我用它来设计它),我跟着许多在线教程,这些教程引导我使用这个网站链接. 我下载源 ...

复选框checkbox勾选问题

复选框checkbox勾选问题相关推荐

最新文章

热门文章