如果復選框已在加載時選中

Question

使用這個jQuery，我遍歷元素並檢查是否選中了相關復選框。

頁面加載時，復選框已選中，但控制台顯示console.log( id + ' not checked' );

我是否錯過了某些內容，因為據我所知它應該顯示console.log( id + ' checked' ); 在控制台中

代碼和HTML：

 $(document).ready(function(e) { $('.row').each(function(index, element) { console.log($(element).attr("id")); default_status($(element).attr("id")); }); }); function default_status(id) { if ($('#dr_default_' + id).is(':checked')) { console.log(id + ' checked'); for (i = 1; i < 4; i++) { $('#dr_number' + i + '_' + id).val(''); $('#dr_number' + i + '_' + id).attr('placeholder', 'default'); $('#dr_number' + i + '_' + id).attr('disabled', true); $('#dr_number' + i + '_' + id).removeClass('required'); } } else { console.log(id + ' not checked'); for (i = 1; i < 4; i++) { $('#dr_number' + i + '_' + id).val(''); $('#dr_number' + i + '_' + id).attr('placeholder', ''); $('#dr_number' + i + '_' + id).attr('disabled', false); $('#dr_number' + i + '_' + id).addClass('required'); } } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox"></td> <td><input type="checkbox" id="dr_default_1" class="row" onclick="default_status('1');" checked="checked"></td> <td>1</td> <td></td> <td><input type="text" name="" id="dr_number1_1" class="form-control" /></td> <td><input type="text" name="" id="dr_number2_1" class="form-control" /></td> <td><input type="text" name="" id="dr_number3_1" class="form-control" /></td> <td> <select name="" id="dr_dialing_1" class="form-control"> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox" id="dr_default_2" class="row" onclick="default_status('2');" checked="checked"></td> <td>2</td> <td></td> <td><input type="text" name="" id="dr_number1_2" class="form-control" /></td> <td><input type="text" name="" id="dr_number2_2" class="form-control" /></td> <td><input type="text" name="" id="dr_number3_2" class="form-control" /></td> <td> <select name="" id="dr_dialing_2" class="form-control"> </select> </td> </tr> </table> 

Answer 1

問題在於，傳遞給“ default_status（）”函數的ID除#之外已經完整，以使其成為有效的CSS / jQuery選擇器。

這意味着，當您運行$('#dr_default_' + id)它實際上使最終選擇器$('#dr_default_dr_default_1') （例如），而jQuery當然找不到，因此它報告為未選中。

只需從測試中刪除硬編碼的id部分，它就會起作用：

 $(document).ready(function(e) { $('.row').each(function(index, element) { console.log($(element).attr("id")); default_status($(element).attr("id")); }); }); function default_status(id) { if ($('#' + id).is(':checked')) { console.log(id + ' checked'); for (i = 1; i < 4; i++) { $('#dr_number' + i + '_' + id).val(''); $('#dr_number' + i + '_' + id).attr('placeholder', 'default'); $('#dr_number' + i + '_' + id).prop('disabled', true); $('#dr_number' + i + '_' + id).removeClass('required'); } } else { console.log(id + ' not checked'); for (i = 1; i < 4; i++) { $('#dr_number' + i + '_' + id).val(''); $('#dr_number' + i + '_' + id).attr('placeholder', ''); $('#dr_number' + i + '_' + id).prop('disabled', false); $('#dr_number' + i + '_' + id).addClass('required'); } } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox"></td> <td><input type="checkbox" id="dr_default_1" class="row" onclick="default_status('1');" checked="checked"></td> <td>1</td> <td></td> <td><input type="text" name="" id="dr_number1_1" class="form-control" /></td> <td><input type="text" name="" id="dr_number2_1" class="form-control" /></td> <td><input type="text" name="" id="dr_number3_1" class="form-control" /></td> <td> <select name="" id="dr_dialing_1" class="form-control"> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox" id="dr_default_2" class="row" onclick="default_status('2');" checked="checked"></td> <td>2</td> <td></td> <td><input type="text" name="" id="dr_number1_2" class="form-control" /></td> <td><input type="text" name="" id="dr_number2_2" class="form-control" /></td> <td><input type="text" name="" id="dr_number3_2" class="form-control" /></td> <td> <select name="" id="dr_dialing_2" class="form-control"> </select> </td> </tr> </table>