Javascript 使用ajax响应选中复选框

我有一个HTML复选框，我正在尝试使用作为ajax响应收到的脚本来检查它。 这是我的HTML：

<form class="form-vertical sms-settings-form">
    <div class="form-group">
        <div data-toggle="tooltip" title="SMS to the customer at the time of sale." class="form-group opt-transport">
               <label for="sale-sms">Sale SMS</label>
               <input type="checkbox" id="sale-sms" data-toggle="toggle" data-on="Send" data-off="Don't Sent">
         </div>
        <textarea data-toggle="tooltip" class="form-control" id="sale-sms-content"></textarea>
    </div>

    <button type="button" class="btn btn-success sms-settings-btn">Save Settings</button>
</form>

这是我的ajax-req-handler.php

下面是我作为AJAX resopnse获得的代码

<script type="text/javascript">
    $(document).ready(function(){
        $(".sms-settings-form #sale-sms").prop('checked', 'checked');
        $(".sms-settings-form textarea").val("Hello [name], Your mobile number is [mobile]. your total amount is Rs. [total] out of which you paid Rs. [paid] and your due amount is [due] for the bill number # [bill] on [date] ");
    });

</script> 

---

响应看起来不错，但仍然没有将我的复选框的值设置为checked。我尝试复制响应并粘贴到我的第一个文件中，其中定义了复选框并启动了ajax请求。它在那里工作。问题只在于ajax响应

我认为ajax-req-handler.php存在问题

您有while循环，并且必须处理多条记录。 如果您得到多条记录，那么用jquery编写的DocumentReady部分将根据数据集中的最后一条记录执行

---

请提供示例数据，以便进行相应的检查。

未经测试，但请将所有代码放在Javascript中，而不是将其注入HTML dom中

$.ajax( {
  url: 'ajax-req-handler.php',
  data: { key: 'load-saved-settings' },
  dataType: 'json'
} ).done( function( data ) {

  if( data.send_sms === 1 ) {
    $(".sms-settings-form #sale-sms").prop('checked', true);
  }

  $(".sms-settings-form textarea").val( data.textarea );

} );

和PHP；相反，你应该这样做

$sql = "SELECT * FROM settings";
$result = $conn->query($sql);
if(num_rows($result)>0){
  while($row=$result->fetch_assoc()){
      $id = $row['id'];
      $setting_name = $row['name'];
      if($id == 1 && $setting_name == 'sale-sms') $sms_content = $row['value'];
      if($id == 2 && $setting_name == 'send-sms') $send_sms = $row['value'];

  }
}

echo json_encode( array(
  'send_sms' => $send_sms,
  'textarea' => $sms_content
) );

---

这里的问题不是脚本没有将checked属性添加到。脚本正在按预期工作，并正在添加选中的属性。问题在于，它不仅仅是一个复选框，而是一个切换开关，其中设置为“显示”：默认情况下为“无”，并且每当单击时，它都会使用class='toggle'向其自定义div添加和删除一些类，以显示开关是打开还是关闭。 所以，在sale sms.attr'checked'表单中执行$.sms设置，为true；这是不够的，因为这只会选中复选框，但不会影响用户界面，切换开关仍会显示为“关闭”，即使它不是。 为了影响UI，我们需要从.toggle中添加和删除一些类 以下是将起作用的代码：

$(".sms-settings-form #sale-sms").attr('checked', true);
$(".sms-settings-form textarea").val("Hello [name], Your mobile number is [mobile]. your total amount is Rs. [total] out of which you paid Rs. [paid] and your due amount is [due] for the bill number # [bill] on [date] ");
$(".toggle").addClass('btn-primary');
$(".toggle").removeClass('btn-default');
$(".toggle").removeClass('off');

---

请注意，如果您的HTML有效-ID是唯一的，那么sale-sms的.sms设置表单sale-sms是多余的，因此您可以只执行sale-sms。可能不会触发document.ready，因为这是一个ajaxrequest@CertainPerformance我试图删除class.sms设置表单，但没有成功work@zainulabdeen那么你的HTML是无效的。确保文档中只有一个元素与特定的ID字符串匹配。@Shwrk我已经尝试从ajax响应中删除document.ready，但问题仍然存在，但作为ajax响应得到的脚本没有问题。很好。这改进了我的代码。但不幸的是没有成功。谢谢你的努力。但我已经试过“检查”了，没错；嗯，我刚刚测试了我给你的代码，它工作得完美无缺。您正在使用哪个版本的jQuery？您的代码还可以。我终于发现了问题所在。我的代码有问题。现在，我要回答我自己的问题是的，这是解决方案，它现在正在发挥作用。我自己的答案不被接受的原因是StackOverflow允许您在2天后接受您的答案。

$sql = "SELECT * FROM settings";
$result = $conn->query($sql);
if(num_rows($result)>0){
  while($row=$result->fetch_assoc()){
      $id = $row['id'];
      $setting_name = $row['name'];
      if($id == 1 && $setting_name == 'sale-sms') $sms_content = $row['value'];
      if($id == 2 && $setting_name == 'send-sms') $send_sms = $row['value'];

  }
}

echo json_encode( array(
  'send_sms' => $send_sms,
  'textarea' => $sms_content
) );

$(".sms-settings-form #sale-sms").attr('checked', true);
$(".sms-settings-form textarea").val("Hello [name], Your mobile number is [mobile]. your total amount is Rs. [total] out of which you paid Rs. [paid] and your due amount is [due] for the bill number # [bill] on [date] ");
$(".toggle").addClass('btn-primary');
$(".toggle").removeClass('btn-default');
$(".toggle").removeClass('off');