Jquery get selected checkboxes

Question

Hi I'd like to get the list of selected checkboxes ina page, actually what I really need is th get the text of the element next to the checkbox which is a html element <li> the code is below and its not working

Here is my current jQuery:

$(document).ready(function () {
  $('#target').click(function () {
    alert("in");
    var checkValues = [];
    $('input[name=checkboxlist]:checked').each(function() {
      alert($(this)val());
      checkValues.push($(this)val());
    });
  });
});

Here is the HTML:

<ul id="7b1fe2bd-1b26-4185-8cd9-aec10e652a70">
 <li>Structured Products<input type="checkbox" name="checkboxlist"</li>
 <li>Global FID
 <ul>
  <li>PowerPoint Presentations<input type="checkbox" name="checkboxlist"</li>
  <li>Global Deck
  <ul>
   <li>Test1<input type="checkbox" name="checkboxlist"</li>

   <li>Test2<input type="checkbox" name="checkboxlist"</li>
   <li>Test3<input type="checkbox" name="checkboxlist"</li>

  </ul>
  <input type="checkbox" name="checkboxlist"</li>
  <li>Credit Default Swaps Position
  <ul>
   <li>Test4<input type="checkbox" name="checkboxlist"</li>

   <li>Test5<input type="checkbox" name="checkboxlist"</li>

  </ul>
  <input type="checkbox" name="checkboxlist"</li>
  <li>Thought Leadership<input type="checkbox" name="checkboxlist"</li>
  <li>Fixed Income Perspectives<input type="checkbox" name="checkboxlist"</li>
  <li>Public Policy Information and Regulatory<input type="checkbox" name="checkboxlist"</li>

  <li>Regional FID<input type="checkbox" name="checkboxlist"</li>

 </ul>
 <input type="checkbox" name="checkboxlist"</li>
 <li>Global Rates<input type="checkbox" name="checkboxlist"</li>
 <li>Global Credit Products<input type="checkbox" name="checkboxlist"</li>
 <li>FX<input type="checkbox" name="checkboxlist"</li>

 <li>Emerging Markets<input type="checkbox" name="checkboxlist"</li>
 <li>Commodities<input type="checkbox" name="checkboxlist"</li>
 <li>testcat<input type="checkbox" name="checkboxlist"</li>
 <li>testcat<input type="checkbox" name="checkboxlist"</li>

</ul>

score 17 · Accepted Answer · answered Apr 26 '10 at 11:20

17

Your inputs need to be closed with a /> on the end to make your HTML valid, like this:

<input type="checkbox" name="checkboxlist" />

Then you can do jQuery like this to get an array of the text:

$(function () {
  $('#target').click(function () {
    var checkValues = $('input[name=checkboxlist]:checked').map(function() {
        return $(this).parent().text();
    }).get();
    //do something with your checkValues array
  });
});

You can see this working here

Since all you need is the parent's .text() with your layout, you can use .map() to quickly get an array of a property based on the selector.

answered Apr 26 '10 at 11:20

Nick Craver

623,446
136
1,297
1,155

1

To make the HTML valid doesn't require the slash, which the browser parser will ignore. – Tim Down Apr 26 '10 at 11:46
@Tim - At the very least, it has to be closed, why not do it in a XHTML valid way while you're at it? It's valid HTML with it, it's invalid XHTML without it...saying the browser will completely ignore it is an incorrect statement. You're assuming his DOCTYPE, but `/>` works in *any* doctype, no assumptions made there. – Nick Craver Apr 26 '10 at 13:52
OK, fair points, though using XHTML in general doesn't make a lot of sense. – Tim Down Apr 26 '10 at 16:05
Just to weigh in here, using XHTML makes a lot of sense. To not use it because you don't have to is silly. – TheSoftwareJedi Jan 21 '14 at 02:01

score 4 · Answer 2 · edited Mar 17 '12 at 21:41

4

$("input[type=checkbox]:checked").parent().text()

edited Mar 17 '12 at 21:41

Grzegorz Rożniecki

27,415
11
90
112

answered Apr 26 '10 at 11:21

Andrew dh

881
9
19

score 3 · Answer 3 · answered Apr 26 '10 at 11:19

First of all you have to close your checkbox tag

<input type="checkbox" name="checkboxlist"

should be

<input type="checkbox" name="checkboxlist" />

I think, from your HTML you can get the text of the lis which will be the desired text

$(function(){
    $('#target').click(function(){
        var selected = new Array();
        $("input:checkbox[name=checkboxlist]:checked").each(function(){
            var val = $(this).closest("li").text();
            selected.push(val);
        });
    });
});

score 0 · Answer 4 · edited Mar 17 '12 at 21:41

0

You are not closing your input tags correctly. Also, $(this)val() should be $(this).val().

If you intend to obtain the text of li element which contains the input element, you can write as below:

$(this).parents("li:first").text();

edited Mar 17 '12 at 21:41

Grzegorz Rożniecki

27,415
11
90
112

answered Apr 26 '10 at 11:24

Technowise

1,182
6
11

1

There's a `.closest("li")` that makes this simpler ;) – Nick Craver Apr 26 '10 at 11:29

Jquery get selected checkboxes

4 Answers4

Linked