如何使用HTML複選框在網頁中實現多選功能

一、複選框的基本使用

1、HTML複選框是一種常見的表單控制項，用於允許用戶從多個選項中進行選擇。

<input type="checkbox" name="option1" value="Option 1">Option 1<br>
<input type="checkbox" name="option2" value="Option 2">Option 2<br>
<input type="checkbox" name="option3" value="Option 3">Option 3

2、上述代碼演示了基本的複選框用法，其中type屬性為checkbox表示該控制項為複選框，name屬性為該選項的名稱，value屬性為該選項的值，用戶所選的值會傳遞到伺服器端。

3、當用戶勾選複選框時，該複選框所代表的值將會在form表單中被提交到伺服器端，而勾選多個複選框時，伺服器端將會接收到多個值。

二、複選框的屬性

1、除了上述的name和value屬性之外，複選框還有其他的屬性，如checked、disabled、readonly等。

2、其中checked屬性表示複選框默認是否被選中，可以設置為checked或不設置；disabled屬性表示複選框是否禁用，可以設置為disabled或不設置；readonly表示複選框是否只讀，即用戶選擇之後不可修改，可以設置為readonly或不設置。

<input type="checkbox" name="option1" value="Option 1" checked>Option 1（默認選中）<br>
<input type="checkbox" name="option2" value="Option 2" disabled>Option 2（禁用狀態）<br>
<input type="checkbox" name="option3" value="Option 3" readonly>Option 3（只讀狀態）

3、上述代碼演示了常見的幾種複選框屬性的用法。

三、全選、反選

1、在一些情況下，可能需要實現全選、反選的功能，這時可以在複選框中添加相應的JavaScript代碼。

2、下面是一個全選、反選的例子，在代碼中的selectAll和unSelectAll是JavaScript函數名，確認函數名沒有衝突。

<head>
<script>
function selectAll(){    //全選
    var checkb=document.getElementsByName(\"myCheckbox\");
    for(var i=0;i<checkb.length;i++){
        checkb[i].checked=true;
    }
}
function unSelectAll(){  //反選
    var checkb=document.getElementsByName(\"myCheckbox\");
    for(var i=0;i<checkb.length;i++){
        checkb[i].checked=!checkb[i].checked;
    }
}
</script>
</head>
<body>
<input type=\"checkbox\" name=\"myCheckbox\" value=\"checkbox1\">1<br>
<input type=\"checkbox\" name=\"myCheckbox\" value=\"checkbox2\">2<br>
<input type=\"checkbox\" name=\"myCheckbox\" value=\"checkbox3\">3<br>
<button onclick=\"selectAll()\">全選</button>
<button onclick=\"unSelectAll()\">反選</button>
</body>

四、其他應用

1、除了單純的選擇功能，複選框還可以用來實現其他有趣的功能，如圖片的多選。

2、以下代碼演示了如何使用複選框實現圖片的多選功能。

<head>
<script>
function showChecked(){
    var result=\"\";
    var checkb=document.getElementsByName(\"myImage\");
    for(var i=0;i<checkb.length;i++){
        if(checkb[i].checked==true){
            result+=checkb[i].value+\", \";
        }
    }
    document.getElementById(\"result\").innerHTML=result;
}
</script>
</head>
<body>
<img src=\"image1.jpg\">
<input type=\"checkbox\" name=\"myImage\" value=\"image1.jpg\"><br>
<img src=\"image2.jpg\">
<input type=\"checkbox\" name=\"myImage\" value=\"image2.jpg\"><br>
<img src=\"image3.jpg\">
<input type=\"checkbox\" name=\"myImage\" value=\"image3.jpg\"><br>
<button onclick=\"showChecked()\">確認選擇</button>
<div id=\"result\"></div>
</body>

3、上述代碼中，當用戶選擇了圖片之後，點擊確認選擇按鈕，所選的圖片名稱將會顯示在頁面的result處。

五、總結

本文通過介紹複選框的基本用法、屬性、全選、反選以及其他應用，詳細闡述了如何使用HTML複選框在網頁中實現多選功能。希望對讀者有所幫助。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/269894.html