JavaScript 遍历复选框和输入框,将输入框值赋予复选框
以下是一个使用 JavaScript 遍历复选框和输入框元素并将输入框的 value 值赋值给前面的复选框的 value 值的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>复选框和输入框赋值</title>
</head>
<body>
<input type='text' id='input1' value='输入框1'>
<input type='checkbox' id='checkbox1' value=''>
<br>
<input type='text' id='input2' value='输入框2'>
<input type='checkbox' id='checkbox2' value=''>
<br>
<input type='text' id='input3' value='输入框3'>
<input type='checkbox' id='checkbox3' value=''>
<br>
<button onclick='assignValues()'>赋值</button>
<script>
function assignValues() {
// 获取所有复选框和输入框元素
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var inputs = document.querySelectorAll('input[type="text"]');
// 遍历输入框元素
for (var i = 0; i < inputs.length; i++) {
// 获取输入框的 value 值
var inputValue = inputs[i].value;
// 将输入框的 value 值赋值给前面的复选框的 value 值
if (i > 0) {
checkboxes[i - 1].value = inputValue;
}
}
}
</script>
</body>
</html>
在上面的示例中,我们首先通过 document.querySelectorAll 方法获取所有的复选框和输入框元素。然后使用一个 for 循环遍历输入框元素,获取每个输入框的 value 值。最后,将输入框的 value 值赋值给前面的复选框的 value 值。
请注意,示例中的代码仅为演示目的,并没有处理复选框和输入框的逻辑关系。如果需要根据复选框的选中状态来进行赋值操作,需要添加相关的逻辑判断。
原文地址: https://www.cveoy.top/t/topic/p1Le 著作权归作者所有。请勿转载和采集!