HTML Checkbox屬性詳解

一、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 的基本概念及其常用的屬性。同時我們了解了複選框的應用場景，為自己的開發工作提供了一些靈感和啟示。