改变checkbox默认选中状态及取值的实现代码

下面我将为你详细讲解如何改变checkbox默认选中状态及取值的实现代码。

修改checkbox默认选中状态

通过HTML的checked属性

checkbox的默认选中状态可以通过HTML的checked属性来设置。该属性值为true时，checkbox为选中状态；为false时，checkbox为未选中状态。如下所示为一个未选中的checkbox：

<input type="checkbox" name="testCheckbox" id="test-checkbox">

将该checkbox修改为选中状态，只需在input标签中添加checked属性即可，如下所示：

<input type="checkbox" name="testCheckbox" id="test-checkbox" checked>

通过JavaScript修改选中状态

除了通过HTML属性设置checkbox的默认选中状态之外，也可以通过JavaScript来修改checkbox的选中状态。以下代码示例为通过JavaScript将一个未选中的checkbox设置为选中状态：

var checkbox = document.getElementById("test-checkbox");
checkbox.checked = true;

获取checkbox的值

当我们需要获取checkbox的选中状态时，可以通过获取其checked属性的值来实现。

以下代码示例为检查一个名为testCheckbox的checkbox是否被选中：

var checkbox = document.getElementsByName("testCheckbox")[0];
if (checkbox.checked) {
    console.log("testCheckbox选中");
} else {
    console.log("testCheckbox未选中");
}

另一个常见的例子为获取一组checkbox中选中的项。首先，我们需要获取所有的checkbox，然后遍历这些checkbox，并检查每个checkbox的checked属性是否为true。

以下代码示例为获取所有名为testCheckbox的checkbox中选中的项：

var checkboxes = document.getElementsByName("testCheckbox");
var checkedItems = [];  // 存储所有被选中的项
for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
        checkedItems.push(checkboxes[i].value);
    }
}
console.log(checkedItems);

以上就是关于修改Checkbox默认选中状态及取值的详细攻略，希望对你有帮助！