Javascript 使用ajax php复选框内联编辑html表&；选择

最终编辑：我放弃了使用此方法获取复选框的尝试。相反，我只是使用带有“是”和“否”的组合框。多亏了SE用户的帮助，组合工作得非常好：）事实证明它更好，我认为。内联编辑的复选框，我实现它的方式可能会导致意外选中或取消选中复选框。一个组合是额外的2次点击，但它是值得的，以消除事故。它看起来也很棒，因为我只是交换了一点红色的“x”或绿色的“check”来表示开和关。看起来真不错。再次感谢大家的帮助

我正在使用from方法创建一个具有内联可编辑行的表。到目前为止，它的工作，但不是很好，当谈到选择和复选框。使用selects时，它会更新值，但当它隐藏输入（在tr外部单击时），select的值会显示（fk id字段），而不是在打开和关闭所选选项标记（名称字段）之间显示文本。我可以在jQuery中看到它在哪里显示值，但是如何告诉它使用选项中的文本而不是值

jQuery：

$(document).ready(function(){
    $(".edit_tr").click(function(){
        var ID=$(this).attr('id');
        // hide
        $("#name_"+ID).hide();
        $("#position_"+ID).hide();
        $("#parent_nav_"+ID).hide();
        $("#is_disp_"+ID).hide();
        // show
        $("#name_input_"+ID).show();
        $("#position_input_"+ID).show();
        $("#parent_nav_input_"+ID).show();
        $("#is_disp_input_"+ID).show();
    }).change(function(){
        var ID=$(this).attr('id');
        var name=$("#name_input_"+ID).val();
        var position=$("#position_input_"+ID).val();
        var parent_nav = $("#parent_nav_input_"+ID).val();
        var is_disp = $("#is_disp_"+ID).prop("checked") ? 1 : 0;
        // data string
        var dataString = 'id='+ ID +'&name='+name+'&position='+position+'&parent_nav='+parent_nav+'&is_disp='+is_disp;

        if(name.length > 0 && position.length > 0 && parent_nav.length > 0) {
            var parent_nav_txt = $("#parent_nav_input_"+ID+" option:selected").text();
            $.ajax({
                type: "POST",
                url: "admin_nav_edit.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#name_"+ID).html(name);
                    $("#position_"+ID).html(position);
                    $("#parent_nav_"+ID).html(parent_nav_txt);
                    $("#is_disp_"+ID).html(is_disp);
                }
            });
        } else {
            alert('Enter something.');
        }
    });
    //edit input box click action
    $(".editbox").mouseup(function(){
        return false
    });
    //outsire click action
    $(document).mouseup(function() {
        $(".editbox").hide();
        $(".text").show();
    });
}); 

我知道脚本中的'is_disp'变量没有检索到正确的内容，但其他一切都正常工作，因此我不认为我需要发布其余代码，但如果必要，我会发布

那么，我应该如何让它识别复选框未选中，并确保将0发送到db，如果选中，则发送1？我就是这么做的

使用select时，我不确定要做什么，也不确定如何将select标记之间的值作为目标来显示，而不是value=“”值，同时确保value=“”值存储在db中

非常感谢您的帮助

对复选框调用

.val（）

将始终返回在DOM中设置的值。您应该这样做：

var is_disp = $("#is_disp_input_"+ID).is(':checked');

如果元素具有CSS选择器，则

.is（）

jQuery函数返回true，在本例中为

：checked

---

另外，在服务器上，应该使用

if（！empty（$\u POST['myvar']）{}

而不是

if（isset（$\u POST['myvar']）{}

检查复选框变量是否为true或false，因为

isset（）

即使myvar为零或false，也会返回true

要获取选择框选项的文本，请使用

：selected

选择器和

.text（）

对于复选框，请选中返回的

.prop（“已选中”）

编辑：

然后在ajax函数中

       $.ajax({
            type: "POST",
            url: "admin_nav_edit.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#name_"+ID).html(name);
                $("#position_"+ID).html(position);
                $("#parent_nav_"+ID).html(parent_nav_text);
                $("#is_disp_"+ID).html(is_disp);
            }
        });

---

谢谢我认为这是可行的，但我意识到问题也可能存在于我的php中。我正在使用if（isset（$\u POST['is\u disp']）{$admin\u nav->is\u disp=1；}或者{$admin\u nav->is\u disp=0；}来更新记录，它在ajax之前工作。我还尝试了$admin\u nav->is\u disp=mysql\u prep（$\u POST['is\u disp']）；一种方法将1更新为0，另一种方法将0更新为1，但如果这有意义的话，这两种方法不能同时更新。我应该如何重写我的更新语句？再次感谢！我不知道mysql_prep是什么。。。但你的第一个if/else条件似乎很好。除非我会使用

if（！empty（$\u POST['is\u disp']）

而不是

isset

。您可以将变量设置为0（零），而isset（）仍将返回true，这不是您想要的。谢谢。mysql_prep（）是我的反sql注入函数。我明白你对isset的意思，但这就是我一直在使用的，因为html表单复选框的工作方式似乎是将它的值设置为静态字符串（在我的案例1中，因为它是布尔值），如果选中它，它会在帖子中发送值，但如果不选中，它什么也不发送。恐怕这也是我在使用ajax时遇到困难的原因。在发布之前，我花了很长时间寻找答案，所以要么我把它复杂化了，要么我遗漏了一些基本的东西。即使jqGrid似乎也没有处理复选框。好吧，如果您以前没有使用Ajax，那么浏览器不会为未选中的复选框发送POST字段。但是，现在您正在使用ajax并构建一个数据字符串，您总是将is_disp发送到服务器。因此，

isset（）

每次都将返回true。我明白了。太好了。非常感谢。尝试使用建议的编辑使其工作，但我担心这两个建议对我都不起作用。知道我做错了什么吗？非常感谢你的帮助！你现在工作得很好。我还没有解决这个问题。我可以让它将其设置为零并取消选中，但不能反过来设置。当我包含&&is_disp.length>0时，会弹出警报（“输入某物”），因此使用此代码，当从未选中状态选中该框时，它不会发送任何内容。我讨厌复选框。我可以用一个带有“是”和“否”的组合框，但这感觉像是放弃了。显然，这是一个更复杂的问题。所提供的解决方案都不起作用。我已经放弃了使用ajax和jQuery的简单复选框。对于我所有的“display”布尔值，我将使用一个带有“yes”和“no”的组合框，让它显示漂亮的绿色“check”或红色“x”，而不是复选框。执行和工作完美。这是一个额外的点击，但不是世界末日。也许有一天我会找到解决办法。谢谢大家的帮助！我学到了很多，谢谢！我试着实施你的建议，但我尝试的方式对我不起作用。我用我的尝试更新了我的代码。再次感谢。选项的文本是什么？因为它看起来像是你在尝试使用它作为选择器？它们是有效的选择器吗？非常确定。我在其他字段上使用相同的方法，它们工作正常。现在，复选框和选项都不起作用。组合框甚至没有出现。@sinrise我说的是：

$（parent\u nav\u sel\u txt）.hide（）

，如果“parent\u nav\u sel\u txt”的值不是一个合适的选择器，如

.someClassName

或

someId

或

someTagName

等，它将不会选择corr

var check = $("#checkboxID").prop("checked") ? 1: 0;

var parent_nav_text = $("#parent_nav_input_"+ID+" option:selected").text();

       $.ajax({
            type: "POST",
            url: "admin_nav_edit.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#name_"+ID).html(name);
                $("#position_"+ID).html(position);
                $("#parent_nav_"+ID).html(parent_nav_text);
                $("#is_disp_"+ID).html(is_disp);
            }
        });