Javascript/Ajax/Jquery 修改选择记录答案

【问题标题】：Javascript/Ajax/Jquery modifying a select recordJavascript/Ajax/Jquery 修改选择记录
【发布时间】：2013-09-29 21:57:26
【问题描述】：

我有一个 html 表格，第一列是一个复选框列表（与表格行一样多）都有id="checkbox1", "checkbox2", "checkbox3"....点击一个按钮（id="modifyLink"）我需要找到首先选中复选框（如果在第一个之后有任何复选框，则不会打扰），然后打开我的模式（id="modModal"）并将一个 php 页面加载到其中并发布选中复选框的值。

这是我提出的（显然不起作用）：

$function(){
    $("#modifyLink").click(function(){
        var checkbox = 'checkbox1';
        for(var i=2; getElementById(checkbox).checked == 1; i++){
            checkbox = 'checkbox'.i;
        }
        if(getElementById(checkbox)==true){
            var id = getElementById(checkbox).val();
            $(#modModal).modal('show');
            $(#modModal).innerhtml = 'load my modal with index.php/trainings/mod passing the id variable possibly in POST';
        });
};

如果我完全错了，有人可以提出完全不同的建议吗？

编辑：

好的，我已经对此进行了更多的研究并为此而努力：

$(function() {  
  $("#trainingRow").click(function() {  
    var id = $("#trainingRow").attr('data-value');  
    var dataString = 'id='+ id;
    $.ajax({  
        type: "POST",  
        url: "/index.php/trainings/showDetail",  
        data: dataString, 
        dataType: 'json',
        success: function(data) {  
            $("div#detailModal").html(data.html);
            $("div#detailModal").modal('show');
        }  
    });
    return false;
  });  
});

但为什么 div#detailModal html 不更新？我已经检查了 php 函数通过 var_dump 返回的内容及其正是我感兴趣的 HTML 代码，但我不知道为什么它不起作用（返回的变量称为 html 并且我在我之前 json_encode php 中的所有内容把它返还）。提醒一下会很好，我想我已经读了一些东西:)

【问题讨论】：

标签： javascript jquery ajax checkbox

【解决方案1】：

你的代码很丑……但你不想这样（未经测试）

$(function)({
    $("#modifyLink").click(function(){
        var checkbox = 'checkbox',
            current = null,
            i = 0;
        while (document.getElementById(checkbox + i).length == 1){
            current = $(document.getElementById(checkbox + i));
            if (current.is(':checked'))
            {
              var id = current.val();
              $.post('url', { id: id }, function(content) {
                $('#modModal').modal('show');
                $('#modModal').html(content);
              });
            }
            i += 1;
        }
});

【讨论】：

【解决方案2】：

如果您能够为所有复选框分配一个类，则可以更轻松地完成此操作，例如“myCheckboxClass”。那么你所需要的就是：

$function(){
    $("#modifyLink").click(function(){
        var checkedBox = $(".myCheckboxClass:checked").first();
        var val = checkedBox.val();
        $(#modModal).modal('show');
        $(#modModal).innerhtml = 'load my modal with index.php/trainings/mod passing the id variable possibly in POST';
        });
};

或者，如果您知道表的 id，例如“myTableId”，你可以做类似的选择，只需将var checkedBox这一行替换为

var checkedBox = $("#myTableId input:checkbox:checked).first();

【讨论】：

我知道表ID，所以我可以使用更清洁的解决方案。我今晚下班回家时会试试（我在 GMT+1）。有没有办法让 innerhtml 或类似的命令从 url 中读取？或者是制作模态并输入文本或其他任何内容然后在我获得 ID 后自动完成它们的最佳方法？
我使用过的唯一模态是 jqueryUI 对话框，它具有模态模式。 jqueryui.com/dialog/#modal-form 你可以把它变成一个模态对话框，当你想要的 url 完成加载时，很容易替换它现有的 html。（基本上，当 onLoad 触发时，更改对话框 div 的内容，或者关闭该对话框并打开另一个。）

【解决方案3】：

解决了，我的 ajax 实际上是正确的（第二轮）。问题是即使您对它们进行 json_encode，也无法从 PHP 返回变量。您需要对它们进行 json_encode 并回显它们！

感谢大家的投入！

【讨论】：