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

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>

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