1

I am having a empty sendStatus[]. basically i am check the value whether that exist on array while user click on check box. if that's not there i am just add the value with "add+this.value" in case user click on the check box again,

I am checking if the sendStatus[] contains the "add+this.value" if that's exist i am removing it and adding a new value as "remove+this.value" , so only i will get a value as "add+this.value" or "remove+this.value" in the each of my checkboxes.

to do this i used this function but not works:

var sendStatus = [];

var clearValues = function(newVal){
            console.log("calling",newVal);

        }

        $("form").on("click", ":checkbox", function(e){

            var el = $(this),parentClass = $(this).parent().hasClass("green"),label = $(this).parent();

            if(!parentClass){
                label.addClass("green");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != "remove" + el.val();
                });

                if ($.inArray("add" + el.val(), sendStatus) === -1) {
                    sendStatus.push("add" + el.val());
                }

            }else{
                label.toggleClass("red");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != "add" + el.val();
                });

                if ($.inArray("remove" + el.val(), sendStatus) === -1){
                    sendStatus.push("remove" + el.val());
                }
            }
        console.log(sendStatus);

        })

anyone simplify my function and highlight the issue what i am facing.. thanks in advance.

4

2 回答 2

1

I'm pretty sure that the problem is within the :checkbox selector. Is the console.log running? Anyway I think some assignations more will make the code more legible and less error likely. You can try this example solid http://jsfiddle.net/AyjnW/4/ seems working.

$("form").on("click",'input[type="checkbox"]', function(e){

            var el = $(this),
                label = el.parent(), 
                hasParentClass = label.hasClass("green"),
                elementValue = el.val(),
                removeElementValue = "remove"+ elementValue,
                addElementValue = "add"+ elementValue ;
            if(! hasParentClass ){
                label.removeClass("red").addClass("green");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != removeElementValue ;
                });

                if ($.inArray(addElementValue , sendStatus) === -1) {
                    sendStatus.push( addElementValue );
                }

            }else{
                label.removeClass("green").addClass("red");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != addElementValue ;
                });

                if ($.inArray(removeElementValue , sendStatus) === -1){
                    sendStatus.push( removeElementValue );
                }
            }
            console.log(sendStatus);

        }) ;
于 2013-06-26T09:02:10.953 回答
1

Be careful about .on() eventhandler, Usage:

$("selector1").on("click",'selector2', function(e) {...

In the selector1 section you have to provide a static node selector, wich not changing at javascript runtime (wich comes from webserver or it is statically in a html document.) Write the selector the most close to the dinamyc part. e.g: $("form table > tbody > tr") The selector2 is the dinamyc part of selection, these nodes are created at javascript runtime, they are not in DOM. So write here your checkboxes or also the td-s (if you have and they are dinamycally created).

$("form table > tbody > tr").on("click",'td > input[type="checkbox"]', function(e){ ...
于 2013-06-26T09:15:11.740 回答