javascriptgoogle-closure-compilergoogle-closuregoogle-closure-library

Check Box using Google Closure


I retrieve a list of users from database and display it in a JSP. Each user has a status(Active or Inactive) associated with them and the status can be updated based on check-box selection on click of either activate or deactivate user. How do we render a check-box for each user dynamically using Google closure? And there must be a parent check-box which when checked all the other check-boxes will also be checked and all users can either be activated or deactivated?


Solution

  • By 'dynamically' I assume you mean within the JavaScript? Google Closure doesn't run in JSP.

    var users = [{ 'id': 'myId', 'activated': true }];
    var usersLength = users.length;
    var checkboxes = [];
    
    for (var i = 0; i < usersLength; i++) {
        var user = users[i];
    
        var checkbox =
            goog.dom.createDom(
                goog.dom.TagName.INPUT, { 'type': 'checkbox', 'name': user.id });
    
        checkbox.checked = user.activated;
    
        checkboxes.push(checkbox);
    }
    
    var master = goog.dom.createDom(goog.dom.TagName.INPUT, { 'type': 'checkbox' });
    
    goog.events.listen(
        master,
        goog.events.EventType.CLICK,
        function (event) {
            var isChecked = event.target.checked;
            goog.array.forEach(checkboxes, function(ck) { ck.checked = isChecked; });
        }
    );