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

Question

使用这个jquery，我循环遍历元素并检查是否选中了相关的复选框。

页面加载时，复选框被选中，但控制台显示 console.log( id + ' not selected' );

我错过了什么吗，因为据我所知，它应该在控制台中显示 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>