HTML Checkbox属性详解

一、CheckBox基础概念

CheckBox 即 复选框 ，是一种 HTML 表单元素。可以在多个选项中选择一项或多项，与单选框Radio类似。

在 HTML 中引入复选框非常简单，只需要使用input 标签，把 type 属性设为 'checkbox' 即可。

<input type="checkbox" name="vehicle1" value="Bike">I have a bike

<input type="checkbox" name="vehicle2" value="Car">I have a car 

二、CheckBox的属性及其用法

1. checked属性

checked 属性可以选中文本框。该属性可设置或返回一个布尔值，但是要将其设置为选中状态，需要为其指定值，比如 checked="checked"。

<input type="checkbox" name="vehicle1" value="Bike" checked="checked">I have a bike

<input type="checkbox" name="vehicle2" value="Car">I have a car 

2. disabled属性

disabled 属性用于禁用复选框。如果把该属性添加到一个复选框中，那么这个复选框就会被禁用，用户无法激活它。

<input type="checkbox" name="vehicle1" value="Bike" disabled>I have a bike

<input type="checkbox" name="vehicle2" value="Car">I have a car 

3. onchange属性

onchange 属性用于在复选框的值发生改变时触发一个函数。用户在选择一个复选框时，触发 onchange 事件，借此可以获知当前选中的复选框值。

<input type="checkbox" name="vehicle1" value="Bike" onchange="onCheck()">I have a bike

<input type="checkbox" name="vehicle2" value="Car" onchange="onCheck()">I have a car 
<script>
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;
}
</script>

三、CheckBox的一些应用场景

1. 优惠券领取

在网站上优惠券领取页面中，使用多个 CheckBox 组成的表单，用户可以选择需要领取的优惠券。用户可以选择多种权益组合使用，然后提交表单请求领取优惠券。

2. 购物车结算

在购物车页面中，使用多个 CheckBox 组成的表单，用户可以选择需要结算的商品。可以通过复选框的选中状态来确定用户选择了哪些商品，然后提交表单请求结算。

3. 多种支付方式选择

在订单结算页面中，使用多个 CheckBox 组成的表单，用户可以选择不同的支付方式。通过复选框的选中状态来确定用户选择了哪些支付方式，在提交表单请求提交订单时，后台再根据这些选项来处理订单。

四、小结

通过本文的学习，我们了解了 CheckBox 的基本概念及其常用的属性。同时我们了解了复选框的应用场景，为自己的开发工作提供了一些灵感和启示。