jQuery和MySQL中的复选框 - 已选或未选。

Question

我正在创建一个系统，需要能够勾选/取消复选框。每当其状态改变时，我需要使用jQuery向一个页面发出AJAX调用，以更新数据库。

如何实现这个功能？

- Dennis Lauritzen

Answer 1

例如，你可以这样做：

首先，你需要查看复选框是否被选中：

$("#yourSelector").live("click", function(){
        var id = parseInt($(this).val(), 10);
        if($(this).is(":checked")) {
            // checkbox is checked -> do something
        } else {
            // checkbox is not checked -> do something different
        }
});

您可以通过 Ajax 加载特定的内容：

$.ajax({
                type: "POST",
                dataType: "xml",
                url: "path/to/file.php",
                data: "function=loadContent&id=" + id,
                success: function(xml) {
                    // success function is called when data came back
                    // for example: get your content and display it on your site
                }
});

- Sarah West

---

请记得在给变量id赋值之前先声明它。如果使用parseInt()，最好指定基数：parseInt($(this).val(), 10); - David Thomas

Answer 2

你卡在哪个地方了？你应该大概有这样的东西...

$('#myCheckbox').click(function() {
    var checked = $(this).is(':checked');

    $.ajax({
        type: "POST",
        url: myUrl,
        data: { checked : checked },
        success: function(data) {
            alert('it worked');
        },
        error: function() {
            alert('it broke');
        },
        complete: function() {
            alert('it completed');
        }
    });
});

- fearofawhackplanet

---

我卡在点击事件上了。我读到说使用 click 与复选框不好。当我尝试在复选框被点击时执行警报时，它并没有弹出任何警报 - 所以我不确定它是否起作用 :s - Dennis Lauritzen

Answer 3

检测复选框是否被选中：

if ( $('#id').is(':checked') ) { }

这可以在一个由“onchange”事件触发的函数中执行。

function checkCheckboxState() {

    if ( $('#id').is(':checked') ) { 

        // execute AJAX request here

    }
}

- glutorange

Answer 4

可能是这样的吗？

$('.checkbox').click(function (){
    var val = $(this).is(':checked');
    $.load('url_here',{status:val});
});

- Val

Answer 5

<input type="checkbox" name="foo" value="bar" class="checkIt"/>

<script type="text/javascript">
    $('.checkIt').bind('click', function() {
        if($(this).is(":checked")) {
            // checkbox is checked
        } else {
            // checkbox is not checked
        }
    });
</script>

现在您可以拥有多个复选框。

- thinklinux