getting the text of checkboxes in jquery (not values)

Question

Dynamic checkboxes are created using the below code.

    var list = new Array();
    for(var i=0; i<data.length; i++)
    {
         $('#cContainer').append('<input type="checkbox" name="catChkBox" class="ckbox"
          id = "'+ data[i].id +'" value="'+ data[i].id + '" /> ' + data[i].name + '<br 
          />');
    }

The above code is inside document.ready function. I want to collect the checked values ie. data[i].name outside document.ready and put it in a list.

I tried the below code which displays only the id. But what I need is the text. Here it is data[i].name (I get this from dwr call)

function showSelectedValues()
{
  alert("--------------" + $("input[name=catChkBox]:checked").map(
     function () {return this.value;}).get().join(","));
}

I will call showSelectedValues() from some other method where I will make use of the values. Any idea for this???

hey , why you aren't marking none of answers to your questions as accepted ! — mohsen.d
– mohsen.d, Commented Apr 16, 2013 at 15:37

Ilya · Accepted Answer · 2013-04-12 11:43:35Z

2

$("input[name=catChkBox]:checked").val();

answered Apr 12, 2013 at 11:43

Ilya

1796 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sahana Over a year ago

@llya it prints only the id and not the name (data[i].name)

Ilya Over a year ago

because the "value" and "id" of the checkbox contain data[i].id in your example data[i].name is not a part of the checkbox

Ilya Over a year ago

because the "value" and "id" of the checkbox contain data[i].id in your example data[i].name is not a part of the checkbox

sahana Over a year ago

@llya but i want only the options. Is there any way to do it ?

mohsen.d · Accepted Answer · 2013-04-12 13:26:46Z

1

for each checkbox add a label

var list = new Array();
for(var i=0; i<data.length; i++)
{
     $('#cContainer').append('<input type="checkbox" name="catChkBox" class="ckbox"
      id = "'+ data[i].id +'" value="'+ data[i].id + '" /><label for="'+ data[i].id +'">' + data[i].name + '</label><br/>');
}

then use code below to get text associated with each checked checkbox

$("input[name=catChkBox]:checked + label").text();

update :

to save values into the array use the code below :

function ConvertSelectedValuesToList()
{
  list = $("input[name=catChkBox]:checked + label").map(function () {
      return $(this).text();
  }).get();
}

if you want to create a comma separated string of values then add join(",") after get() .but then it's not an array anymore.

edited Apr 12, 2013 at 13:26

answered Apr 12, 2013 at 11:55

mohsen.d

8,4357 gold badges44 silver badges61 bronze badges

2 Comments

sahana Over a year ago

Wonderful. I want to store the options into a list as a comma separated one. Any clues for it ?

mohsen.d Over a year ago

@sahana : if you want a comma separated one then it's not a list , it's a string .

Nope · Accepted Answer · 2013-04-12 11:56:06Z

data[i].name is never written to the input element and as such is not part of it. It is merely text following the element.

I would recommend to add a data-attribute also containing the value you are interested in, similar to this:

var list = new Array();

for (var i = 0; i < data.length; i++) {
    $('#cContainer').append('<input type="checkbox" data-name="' + data[i].name + '" name="catChkBox" class="ckbox" id = "' + data[i].id + '" value="' + data[i].id + '" /> ' + data[i].name + '<br/>');
}

Note data-name="' + data[i].name + '" above.

Then you can update your method to simply query the data attribute, similar to this:

function showSelectedValues() {
    alert("--------------" + $("input[name=catChkBox]:checked").map(function () {
        return $(this).data('name');
    }).get().join(","));
}

DEMO - Using the data-attribute

Collectives™ on Stack Overflow

getting the text of checkboxes in jquery (not values)

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related