-1

I am appending the checkboxes in a particular class using some function.. I have a function to run everytime the checkbox is selected.. So I need to get the name and id of the Checkboxes..

Heres the part of the code where I am appending the checkbox dynamically.. Here value is the one I want the id and name attribute to be..

3
  • 4
    You don't have any id in your checkbox Commented Jun 18, 2013 at 10:39
  • I don`t have any ID.. But I want the 'value' as my ID...
    – Ash
    Commented Jun 18, 2013 at 10:44
  • It's not clear what your question is...
    – Dennis
    Commented Jun 18, 2013 at 10:47

6 Answers 6

1
$.each(brandNameg, function(key, value) {

        $(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox'  onclick='selectMainBrand(\"" + value + "\");' />" + value + "</label>");

    });
0
1

set the id using

$.each(brandNameg, function(key, value) {
    $(".fpblocks .fpblocksBrands_inner ul").append('<label class="checkbox"><input type="checkbox" id="' + value + '"  onclick="selectMainBrand("' + value + '");" />' + value + '</label>');
});
2
  • I used like this input = '<label class="checkbox"><input type="checkbox" onclick="selectScatterMainBrand(' + b.name + ' );" />' + b.name + '</label>' .. It`s showing unterminated string literal..
    – Ash
    Commented Jun 18, 2013 at 12:32
  • I can call the function like function selectScatterMainBrand(ids) { console.log(ids) } Isnt? Its prompting the error in the index.html : 1 ?!
    – Ash
    Commented Jun 18, 2013 at 12:50
0
function selectMainBrand(ids) {
    $('#Brands').on("change", "input", function () {   
        console.log("called");
        var selected = this.name;
        console.log(selected);
    });
}

I'm assuming your UL tag has id="brands". If not change the above code as follows

    $('.fpblocks').on("change", "input", function () {   
0
$.each(brandNameg, function(key, value) {

        $(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox' id ='someID' name ='someName' />" + value + "</label>");

    });

and on checkbox click..

$(".fpblocks .fpblocksBrands_inner ul :checkbox").live('click', function(){
 var id = $(this).attr('id'); //get id of checked checkbox
  var name = $(this).attr('name');   //get name of checked checkbox


})
1
  • 1
    insead of '.live' you should use '.on'.. ;) Commented Jun 18, 2013 at 10:49
0
  • remove onclick='selectMainBrand(value);' from inputs' generation code

  • After checkboxes are generated, you can select name and

    $('#Brands input').on("change", function () {
    var name=$(this).attr("name"); var id=$(this).attr("id"); alert(name); alert(id); console.log(selected);
    });

    see the DEMO http://jsfiddle.net/BbtEG/

0

Your dynamically created html (<input type='checkbox' onclick='selectMainBrand(value);' />) does not have a name, or an id. You cannot pass what doesn't exist. To solve this, generate a name and an id to use.

Also in your selectMainBrand function you don't appear to be using the ids parameter that you're passing in. All that function is doing is binding a handler to the input which, since you're using on to bind it, seems silly.

Why not use on to delegate the handler instead? If you delegate the handler, you can grab the name or id from within the handler thereby obviating the need to pass those in as parameters (working demo).

$.each(brandNameg, function (key, value) {
    var label = $('<label />').addClass('checkbox'),
        input = $('<input />').attr({
            "type": "checkbox",
            "name": "mainBrand" + key, //set the name, appending the key to make it unique
            "id": "mainBrand" + key //set the id, appending the key to make it unique
        });
    $(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
//delegate the change handler
$('.fpblocks .fpblocksBrands_inner').on("change", '#Brands input', function (e) {
    var selectedName = this.name,
        selectedId = this.id,
        isChecked = this.checked;
    console.log(JSON.stringify({
        "called": true,
        "selectedName": selectedName,
        "selectedId": selectedId,
        "isChecked": isChecked
    }));
});

If you truly have your heart set on passing in the parameters, there are ways to do that, such as binding the handler within the loop where you create the inputs (working demo):

$.each(brandNameg, function (key, value) {
    var label = $('<label />').addClass('checkbox'),
        input = $('<input />').attr({
            "type": "checkbox",
            "name": "mainBrand" + key, //set the name, appending the key to make it unique
            "id": "mainBrand" + key //set the id, appending the key to make it unique
        }).click(function (e) {
            var self = $(this), // capture the input as a jQuery object (typically very useful)
                actualHandler = function (id, name) {
                    // do stuff
                    console.log(JSON.stringify({
                        "called": "actualHandler",
                        "selectedName": id,
                        "selectedId": name,
                        "isChecked": self.prop('checked')
                    }));
                };
            actualHandler(this.id, this.name);
            // or
            actualHandler(self.attr('id'), self.attr('name'));
        });
    $(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});

or you could set the onchange attribute in the loop where you create the inputs (working demo):

window.inputHandler = function (id, name) { // must be added to the global scope, otherwise it won't be visible.
    // do stuff
    console.log(JSON.stringify({
        "called": "inputHandler",
        "selectedName": id,
        "selectedId": name
    }));
};
$.each(brandNameg, function (key, value) {
    var label = $('<label />').addClass('checkbox'),
        input = $('<input />').attr({
            "type": "checkbox",
            "name": "mainBrand" + key, //set the name, appending the key to make it unique
            "id": "mainBrand" + key, //set the id, appending the key to make it unique
            "onchange": "inputHandler('" + "mainBrand" + key + "', '" + "mainBrand" + key + "')"
        });
    $(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});

and there are other ways to go about it.

Personally, I would use the delegation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.