Question

我有一个复选框可以关闭和关闭一组用户的权限，我希望能够点击每个复选框的父div来激活ajax脚本而不必单击复选框本身。我可以以某种方式声明权限框的父级，而不是声明（'.permission-box'）？

由于

<script>
    //<![CDATA[ 
    $(function() {
        $('.permission-box').click(function() {
            //this is what goes into $_POST
            var data = 'single_permission=' + $(this).attr('value') + '&status=' + $(this).is(':checked');
            $.ajax({
                //This would be the url that would handle updating the MySQL Record
                url: "pages/Permissions_action.php",
                cache: false,
                type: 'POST',
                data: data,
                success: function(response) {}
            });
        });
    }); //]]>
</script>

Answer 1

有很多方法可以写这个，无论如何这里就是其中之一。

首先将click事件绑定到权限框的父级。然后在事件处理程序内部不要忘记再次获取子复选框，并检查/取消选中该复选框。

<script>
    //<![CDATA[ 
$(function(){
$('.permission-box').parent().on('click', function() {
    // Obtain checkbox:
    var checkbox = $(this).find(".permission-box");

    // Switch checked state
    checkbox.attr('checked', !checkbox.is(':checked'));

    // this is what goes into $_POST
    var data = 'single_permission='+ checkbox.attr('value') +'&status=' + checkbox.is(':checked');
    $.ajax({
        //This would be the url that would handle updating the MySQL Record
        url: "pages/Permissions_action.php",
        cache: false,
        type: 'POST',
        data: data,
        success: function(response) {
         }
    });
});
});//]]> 
</script>

Answer 2

您可以使用$（＆＃39; .permission-box＆＃39;）。parent（）。click（）

您还应该查看jQuery On（）的页面。如果我是正确的，这是在jQuery中创建事件列表器的正确方法。

Answer 3

或者您可以使用label-tag作为div，并以这种方式设置样式。

<label for="checkbox1">
     <span>Some text and/or images</span>
     <input type="checkbox" value="myValue" id="checkbox1" />
</label>

没有javascript可以做到这一点。

Answer 4

这里我们将使用类.permission-box获取所有元素的父元素，然后绑定一个命名空间的click事件。

Event namespacing是一种允许我们根据所使用的事件命名空间来不同地处理任务的技术，当你将几个侦听器连接到同一个事件时，它非常有用，并且需要只使用其中一个它们。

看一下这些链接：

使用jQuery 1.7+

$(function() { //document.ready

    //We get all parent elements to delegate the click handler
    $('.permission-box').parent().addClass("parent-permission-box");

    //Only one event handler is assigned to all matched elements.
    //Create namespaced events is a good practice.
    $(document).on("click.parentBox", ".parent-permission-box", function() {

        //triggers the click on the checkbox
        var chk = $(this).find('.permission-box'),
            status = !chk.is(':checked'),
            data;

        //toggle the checked state
        chk.attr('checked', status);

        //build the data to send
        data = { 'single_permission': chk.val(), 'status': status };

        $.ajax({
            url: "pages/Permissions_action.php",
            type: 'POST',
            data: data, //buildUrlParams(data)
            success: function (response) {
                //... or use the deferred .done()
            }
        }); //end .ajax
    }); //end .click

});

//Creates the parameters object in a querystring
function buildUrlParams (obj) {
    var prop, parameters = [];
    for (prop in obj) {
        parameters.push(prop + "=" + obj[prop])
    }
    parameters = parameters.join("&");
    return parameters;
}

单击父div以触发复选框提交？

4 个答案: