javascript - 如果复选框已在加载时选中

使用这个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>

最佳答案

问题在于，传递给“ 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>