,可以通过以下步骤实现:
<input>
元素创建复选框,使用<input>
或<textarea>
元素创建输入框。<form>
<label for="checkbox1">复选框1</label>
<input type="checkbox" id="checkbox1" class="checkbox" />
<input type="text" class="input" />
<label for="checkbox2">复选框2</label>
<input type="checkbox" id="checkbox2" class="checkbox" />
<input type="text" class="input" />
<!-- 添加更多复选框和输入框 -->
</form>
querySelectorAll
方法选择所有具有相同类名的复选框和输入框,然后使用循环遍历它们。const checkboxes = document.querySelectorAll('.checkbox');
const inputs = document.querySelectorAll('.input');
checkboxes.forEach((checkbox, index) => {
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
inputs[index].value = checkbox.value;
} else {
inputs[index].value = '';
}
});
});
在上述代码中,我们为每个复选框添加了一个change
事件监听器。当复选框的状态改变时,如果复选框被选中,则将其对应的输入框的值设置为复选框的值;如果复选框未被选中,则将其对应的输入框的值清空。
这样,当用户选中复选框时,对应的输入框将自动填充相应的值。
请注意,以上代码仅为示例,实际应用中可能需要根据具体情况进行适当的修改和优化。
关于云计算和IT互联网领域的名词词汇,这里无法一一列举和解释。但是,腾讯云作为一家知名的云计算服务提供商,提供了丰富的产品和服务,涵盖了云计算、人工智能、物联网等多个领域。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多相关信息,并查看他们的产品文档和介绍。
领取专属 10元无门槛券
手把手带您无忧上云