一、CheckBox基础概念
CheckBox 即 复选框 ，是一种 HTML 表单元素。可以在多个选项中选择一项或多项，与单选框Radio类似。
在 HTML 中引入复选框非常简单，只需要使用input 标签，把 type 属性设为 ‘checkbox’ 即可。
I have a bike
I have a car
二、CheckBox的属性及其用法
1. checked属性
checked 属性可以选中文本框。该属性可设置或返回一个布尔值，但是要将其设置为选中状态，需要为其指定值，比如 checked=”checked”。
I have a bike
I have a car
2. disabled属性
disabled 属性用于禁用复选框。如果把该属性添加到一个复选框中，那么这个复选框就会被禁用，用户无法激活它。
I have a bike
I have a car
3. onchange属性
onchange 属性用于在复选框的值发生改变时触发一个函数。用户在选择一个复选框时，触发 onchange 事件，借此可以获知当前选中的复选框值。
I have a bike
I have a car function onCheck() { var str=''; var obj=document.getElementsByName('vehicle1'); for(var i=0; i<obj.length; i++) { if(obj[i].checked) str+=obj[i].value+' '; } document.getElementById('check').innerHTML=str; }
三、CheckBox的一些应用场景
1. 优惠券领取
在网站上优惠券领取页面中，使用多个 CheckBox 组成的表单，用户可以选择需要领取的优惠券。用户可以选择多种权益组合使用，然后提交表单请求领取优惠券。
2. 购物车结算
在购物车页面中，使用多个 CheckBox 组成的表单，用户可以选择需要结算的商品。可以通过复选框的选中状态来确定用户选择了哪些商品，然后提交表单请求结算。
3. 多种支付方式选择
在订单结算页面中，使用多个 CheckBox 组成的表单，用户可以选择不同的支付方式。通过复选框的选中状态来确定用户选择了哪些支付方式，在提交表单请求提交订单时，后台再根据这些选项来处理订单。
四、小结
通过本文的学习，我们了解了 CheckBox 的基本概念及其常用的属性。同时我们了解了复选框的应用场景，为自己的开发工作提供了一些灵感和启示。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188589.html
微信扫一扫 
支付宝扫一扫 