Question

<table>
	<tr>
		<th>input</th>
		<th>checkbox</th>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
	</tr>
</table>

嗨，我在左列有十个复选框，在右列有十个输入字段，如果我选择了任何复选框，则相应的输入字段应填充复选框值（或索引），如果您取消选中该复选框，则对应的相应输入如果您选择第一个复选框，则输入字段中的值为1；如果您选择第10个复选框，则输入值中的值为2。检查计数应按顺序进行。请帮助我

Answer 1

使用parent()函数选择td，然后使用siblings()函数获得同级td，然后使用children()函数获得输入框并使用val()在输入字段中插入复选框的值

$('input[type=checkbox]').change(function() {
  $(this).parent('td').siblings('td').children('input').val($(this).val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>input</th>
    <th>checkbox</th>
  </tr>
  <tr>
    <td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
    <td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
  </tr>
  <tr>
    <td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
    <td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
  </tr>
  <tr>
    <td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
    <td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
  </tr>
  <tr>
    <td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
    <td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
  </tr>
  <tr>
    <td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
    <td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
  </tr>
</table>

Answer 2

var texts = document.querySelectorAll('.inpt');
var checkboxes = document.querySelectorAll('.chk');

checkboxes.forEach((checkbox, i) => checkbox.addEventListener('change', () => changeCheckbox.call(checkbox, i)));

function changeCheckbox(i) {
  texts[i].value = this.checked ? this.value : '';
}

<table>
	<tr>
		<th>input</th>
		<th>checkbox</th>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
	</tr>
	<tr>
		<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
		<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
	</tr>
</table>

编辑：警告，我使用了旧版浏览器不支持的箭头功能。

复选框选中和取消选中任务

2 个答案: