获取与选中的复选框关联的所有td名称,并显示在html输入字段中,可以通过以下步骤实现:
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var tdNames = [];
checkboxes.forEach(function(checkbox) {
var td = checkbox.closest('tr').querySelector('td');
tdNames.push(td.textContent);
});
var inputField = document.getElementById('inputField');
inputField.value = tdNames.join(', ');
<input type="text" id="inputField">
<table>
<tr>
<td>名称1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>名称2</td>
<td><input type="checkbox"></td>
</tr>
<!-- 其他行 -->
</table>
<script>
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var tdNames = [];
checkboxes.forEach(function(checkbox) {
var td = checkbox.closest('tr').querySelector('td');
tdNames.push(td.textContent);
});
var inputField = document.getElementById('inputField');
inputField.value = tdNames.join(', ');
});
});
</script>
这样,当复选框的选中状态发生变化时,相关的td名称就会显示在输入字段中。
领取专属 10元无门槛券
手把手带您无忧上云