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

Question

I have a grid of checkboxes to turn off and on permissions a group of users, I would like to be able to click on the parent div for each checkbox to fire the ajax script instead of having to click on the checkbox itself. Instead of stating ('.permission-box') could I state parent of permission-box somehow?

Thanks

<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

There are numerous ways to write this, anyway here is one of them.

First bind the click event to the parent of permission boxes. Then inside the event handler don't forget to obtain the child checkbox again, and to check/uncheck that one.

<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

You could use $('.permission-box').parent().click()

You should also look at the page of jQuery On(). If I am correct that is the right way to create event listners in jQuery.

Answer 3

Or you could use a label-tag as div, and style it that way.

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

That could do the trick without javascript.

Answer 4

Here we are going to get the parent of all elements with the class .permission-box and then, bind a namespaced click event.

Event namespacing is a technique that allows us to handle tasks differently depending on the event namespace used, and it is very useful when you have attached several listeners to the same event, and need to do something with just one of them.

Take a look at these links:

• Namespace your events
• jQuery event names and namespaces
• nsEvents()

Using 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;
}