深入了解checkbox複選框

一、複選框樣式

checkbox複選框是一個常見的HTML表單組件，它提供了多選的功能，通常使用一個小方框標記已選項，並且用戶可以通過點擊方框勾選/取消勾選框中的內容。雖然它是一個基本的表單組件，但是可以使用CSS風格化它的樣式使其在網頁中更加美觀。

    <input type="checkbox" name="fruit" value="apple">Apple
    <input type="checkbox" name="fruit" value="orange">Orange
    <input type="checkbox" name="fruit" value="banana">Banana

使用 CSS 可以為 checkbox 設計更精美的樣式，例如，可以定製 checkbox 的大小，而不像默認大小那麼小。通過將 checkbox 默認的樣式設置為透明，然後通過添加背景和邊框等樣式來自定義 checkbox 的樣式。

    <style>
        input[type=checkbox] {
            display: none;
        }
        input[type=checkbox] + label {
            display: inline-block;
            cursor: pointer;
            height: 40px;
            width: 40px;
            background-color: #fff;
            border-radius: 4px;
            border: 2px solid #333;
        }
        input[type=checkbox]:checked + label {
            background-color: #333;
        }
    </style>

    <input type="checkbox" id="checkbox-1" name="checkbox-1">
    <label for="checkbox-1"></label>

二、複選框設計checkbox

設計 checkbox 的過程中需要考慮顯示、布局、交互、配色等問題。例如，如果使用自定義樣式，在設計複選框的時候，需要保證單選框和複選框的可訪問性。為了完善用戶體驗，我們還需要考慮鼠標指針在不同狀態下的顏色、選中狀態、錯誤提示等等。

此外，為了讓 checkbox 在手機設備上可以更好的被使用，在設計時需要充分考慮到響應式設計與手勢交互方面的問題。

三、checkbox複選框用法

除了默認的用法，checkbox還可以與其他表單一起使用。例如，它可以與 input、button、label 等元素一起使用，這些元素共同創建出非常複雜和有用的表單。

四、checkbox樣式

默認的checkbox樣式可能不符合你的需求，你需要使用 CSS 來自定義 checkbox 的樣式。

    <style>
        input[type=checkbox] {
            display: none;
        }
        input[type=checkbox] + label {
            display: inline-block;
            cursor: pointer;
            height: 50px;
            width: 50px;
            background-color: #fff;
            color: #333;
            font-size: 20px;
            border: 2px solid #333;
            border-radius: 4px;
        }
        input[type=checkbox]:checked + label {
            background-color: #333;
            color: #fff;
        }
    </style>

    <input type="checkbox" id="checkbox-2" name="checkbox-2">
    <label for="checkbox-2"></label>

五、checkbox複選框隱藏

有時候我們需要將 checkbox 隱藏掉，不直接在頁面上顯示，但有時它又是必須的。為了解決這個問題，可以使用CSS將其隱藏，同時使用label元素進行替代顯示。

    <style>
        input[type=checkbox] {
            display: none;
        }
    </style>

    <label for="checkbox-3"><input type="checkbox" id="checkbox-3" name="checkbox-3">Checkbox</label>

六、複選框出現checkbox

我們也可以動態地添加多個 checkbox，當然這會用到 JavaScript。比較常見的方式是使用 jQuery 中的 .append() 函數。

    <div id="checkbox-button"></div>

    <button type="button" onclick="addCheckbox()">Add Checkbox</button>

    <script>
        function addCheckbox() {
            var container = document.getElementById("checkbox-button");
            var checkBoxCount = container.getElementsByTagName("input").length;

            if (checkBoxCount < 3) {
                var checkbox = document.createElement('input');
                checkbox.type = "checkbox";
                checkbox.id = "check" + checkBoxCount;
                checkbox.name = "check" + checkBoxCount;

                var label = document.createElement('label');
                label.htmlFor = "check" + checkBoxCount;
                label.appendChild(document.createTextNode('Checkbox ' + checkBoxCount));

                container.appendChild(checkbox);
                container.appendChild(label);
            }
        }
    </script>

七、checkbox複選框刪除

有時候需要刪除一個 checkbox，同樣也可以使用 JavaScript。可以通過將複選框節點從 DOM 中刪除來實現。在下面的示例中，我們可以選擇一個或多個 checkbox，並將它們從 DOM 中刪除。

    <div id="checkbox-delete">
        <input type="checkbox" id="check-1" name="check-1"><label for="check-1">Checkbox 1</label>
        <input type="checkbox" id="check-2" name="check-2"><label for="check-2">Checkbox 2</label>
        <input type="checkbox" id="check-3" name="check-3"><label for="check-3">Checkbox 3</label>
        <input type="checkbox" id="check-4" name="check-4"><label for="check-4">Checkbox 4</label>
    </div>

    <button type="button" onclick="deleteCheckbox()">Delete Checkbox</button>

    <script>
        function deleteCheckbox() {
            var checkboxes = document.querySelectorAll('#checkbox-delete input[type="checkbox"]');
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    checkboxes[i].parentNode.removeChild(checkboxes[i].nextSibling);
                    checkboxes[i].parentNode.removeChild(checkboxes[i]);

                    i--; 
                }
            }
        }
    </script>

八、複選框checkbox怎麼設置正確答案

在一些情況下，我們需要將一個複選框標記為一個正確的答案，例如，當它們應用於一個測驗或調查時。為了完成此操作，我們可以使用 JavaScript 為特定的複選框輸入顯示“正確”的消息。

    <input type="checkbox" id="correct-answer" name="correct-answer">
    <label for="correct-answer">Checkbox 1</label>
    <br>
    <input type="checkbox" id="wrong-answer" name="wrong-answer">
    <label for="wrong-answer">Checkbox 2</label>

    <script>
        var correctAnswer = document.getElementById("correct-answer");
        var wrongAnswer = document.getElementById("wrong-answer");

        correctAnswer.addEventListener("change", function() {
            if (correctAnswer.checked) {
                wrongAnswer.disabled = true;
                alert("答案正確！");
            }
            else {
                wrongAnswer.disabled = false;
                alert("答案錯誤！");
            }
        });
    </script>

九、checkbox複選框不顯示怎麼辦

出現這種情況的原因可能是：1、複選框的 name 屬性與其他輸入元素的 name 屬性重複了。2、複選框被隱藏或覆蓋了。如果是第二種情況，最簡單的方法就是通過在控制台檢查網頁的 CSS 樣式表，在樣式表中找到並禁用相應的代碼段。

十、checkbox複選框默認全部選中選取

默認情況下，複選框是不選中的。如果你希望默認情況下選中所有複選框，可以使用 checked 屬性，如下所示：

    <input type="checkbox" name="vehicle" value="Bike" checked>I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car" checked>I have a car<br>