当前位置：首页 > JavaScript

js 实现checkbox

2026-02-01 08:09:24JavaScript

使用HTML和JavaScript创建复选框

HTML中创建一个基础的复选框非常简单，使用<input>标签并设置type为checkbox即可。

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">选择此项</label>

通过JavaScript操作复选框

JavaScript可以用来动态控制复选框的状态，例如选中、取消选中或获取当前状态。

// 获取复选框元素
const checkbox = document.getElementById('myCheckbox');

// 设置复选框为选中状态
checkbox.checked = true;

// 取消选中复选框
checkbox.checked = false;

// 获取复选框的当前状态
const isChecked = checkbox.checked;
console.log(isChecked); // true或false

监听复选框的变化事件

可以通过添加事件监听器来响应复选框的状态变化。

checkbox.addEventListener('change', function(event) {
    if (event.target.checked) {
        console.log('复选框被选中');
    } else {
        console.log('复选框被取消选中');
    }
});

动态创建复选框

如果需要通过JavaScript动态创建复选框并添加到页面中，可以使用以下方法。

// 创建一个新的复选框元素
const newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'dynamicCheckbox';

// 创建对应的标签
const label = document.createElement('label');
label.htmlFor = 'dynamicCheckbox';
label.textContent = '动态创建的复选框';

// 将元素添加到DOM中
document.body.appendChild(newCheckbox);
document.body.appendChild(label);

复选框组的管理

当页面中存在多个复选框时，可以通过共同的name属性或类名来管理它们。

<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子

// 获取所有name为fruit的复选框
const fruits = document.getElementsByName('fruit');

// 遍历并检查哪些复选框被选中
fruits.forEach(checkbox => {
    if (checkbox.checked) {
        console.log(checkbox.value + '被选中');
    }
});

使用jQuery操作复选框

如果项目中使用了jQuery，操作复选框会更加简洁。

// 设置复选框为选中状态
$('#myCheckbox').prop('checked', true);

// 监听复选框变化事件
$('#myCheckbox').change(function() {
    if ($(this).is(':checked')) {
        console.log('复选框被选中');
    } else {
        console.log('复选框被取消选中');
    }
});

复选框的样式定制

默认的复选框样式可能不符合设计需求，可以通过CSS或第三方库来自定义样式。

<input type="checkbox" id="styledCheckbox" class="custom-checkbox">
<label for="styledCheckbox">自定义样式复选框</label>

.custom-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.custom-checkbox:checked {
    background-color: #2196F3;
    border-color: #2196F3;
}

复选框与表单提交

在表单中使用复选框时，只有被选中的复选框的值会被提交。

js 实现checkbox

<form id="myForm">
    <input type="checkbox" name="subscribe" value="yes">订阅新闻
    <button type="submit">提交</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(this);
    console.log(formData.get('subscribe')); // 如果选中则为"yes"，否则为null
});