复选框 - 使用 jQuery 和 MySQL 选中或取消选中

发布于 2024-11-07 16:14:01 字数 90 浏览 1 评论 0原文

我目前正在创建一个系统,必须可以选中/取消选中复选框。每次它改变状态时,我都需要 jQuery 对页面进行 AJAX 调用,以更新数据库。

我该怎么做?

I am currently creating a system where it has to be possible to check/uncheck a checkbox. Everytime it changes status I need jQuery to make an AJAX call to a page, that updates the database.

How can I do this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

恋竹姑娘 2024-11-14 16:14:01

例如,您可以这样做:

首先您必须查看该复选框是否已选中:

$("#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
                }
});

For example you can do it like this:

First you have to look if the checkbox is checked:

$("#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
        }
});

You can load specific content via 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
                }
});
一笔一画续写前缘 2024-11-14 16:14:01

你卡在哪一点了?你可能应该有这样的东西......

$('#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');
        }
    });
});

Which bit are you stuck on? You should probably have something like this...

$('#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');
        }
    });
});
凤舞天涯 2024-11-14 16:14:01

检测复选框是否被选中:

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

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

function checkCheckboxState() {

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

        // execute AJAX request here

    }
}

Detect if checkbox is checked:

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

This can be executed in a function that is triggered by "onchange" event.

function checkCheckboxState() {

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

        // execute AJAX request here

    }
}
流心雨 2024-11-14 16:14:01

大概是这样的吧?

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

Something like this probably?

$('.checkbox').click(function (){
    var val = $(this).is(':checked');
    $.load('url_here',{status:val});
});
吃不饱 2024-11-14 16:14:01
<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>

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

<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>

You can now have more than one checkbox.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文