復選框選中和取消選中任務

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>

編輯：警告，我使用了舊瀏覽器不支持的箭頭函數。