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

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>

hi, i have ten checkbox on left column and ten input field box on right column , if i select any check box corresponding input field should filled with check box value(or index) and if u uncheck the check box same corresponding input value should be removed.. if u select first check box the value in the input field is one and if you select 10th check box value in the input field is 2. check count should be in order. pls help me in this

Answer 1

Use the parent() function to select the td and then using siblings() function get the sibling td and using children() function get the input box and using val() insert the value of the checkbox in the input field

 $('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>

Edit: warning, I used arrow functions which are not supported in older browsers.