Get values of all checkboxes in child elements

Question

all im tryin to do is get the values of all checkboxes in child elements, i have seen this question: How to retrieve checkboxes values in jQuery but cant successfully get it working on child elements

My code is this:

    <ul id="menu3" class="side_menu expandfirst noaccordion">

      <li>
        <div class="refine_att"><a href="#" name="Expand/Collapse">Price</a></div>         
           <ul class="check">
             <li><input onclick="updateTextArea()" id="_1" type="checkbox"><a href="#"> £0.00 - £9.99 </a></li>
             <li><input onclick="updateTextArea()" id="_2" type="checkbox"><a href="#"> £10.00 - £99.99 </a></li>
             <li><input onclick="updateTextArea()" id="_3" type="checkbox"><a href="#"> £100.00 - £249.99 </a></li>
             <li><input onclick="updateTextArea()" id="_4" type="checkbox"><a href="#"> £250.00 - £499.99 </a></li>
             <li><input onclick="updateTextArea()" id="_5" type="checkbox"><a href="#"> £500.00 - £999.99 </a></li>
           </ul>
         </div>
        </li>

     </ul>

There could also be multiple 'refine_att' lists, ive shown just one here

 function updateTextArea() {
        var allVals = [];

        $('#menu3').find(":checked").each(function() {
            allVals.push($(this).val());
        });
        $('#t').val(allVals)
    }

Please post your JavaScript code, too. With the HTML alone, we can only make gueses as to what you might be doing wrong. — dgvid, Oct 02 '11 at 22:54
This isn't an answer, but you're missing an opening `div` tag for the div under the `li` tag. — arviman, Oct 02 '11 at 23:12

score 4 · Answer 1 · answered Oct 02 '11 at 23:06

You could try the following:

function updateTextArea() {
    var vals = $('#menu3 input:checkbox:checked').map(
        function(){
            return this.id + ': ' + $(this).val();
        }).get().join(', ');
    $('#t').text(vals);
}

$('input:checkbox').change(
    function(){
        updateTextArea();
    });

JS Fiddle demo.

score 2 · Accepted Answer · answered Jan 10 '13 at 16:19

Shouldn't you be checking any data of your checkbox values, rather than checking the inner html of your tags? Also, I would get rid of the onclick, and do a jquery search on ALL checkboxes inside the ul. Like (notice that I added an id, and added values to the checkboxes):

<ul class="check" id="ul_check">
 <li><input id="_1" type="checkbox" value="0"><a href="#"> £0.00 - £9.99 </a></li>
 <li><input id="_2" type="checkbox" value="10"><a href="#"> £10.00 - £99.99 </a></li>
 <li><input id="_3" type="checkbox" value="100"><a href="#"> £100.00 - £249.99 </a></li>
 <li><input id="_4" type="checkbox" value="250"><a href="#"> £250.00 - £499.99 </a></li>
 <li><input id="_5" type="checkbox" value="500"><a href="#"> £500.00 - £999.99 </a></li>
</ul>

jQuery:

$('#ul_check input:checkbox').change(
 function(){
  var strSelectedVals = $('#ul_check input:checkbox:checked').map(
   function(){
    return $(this).val();
   }).get().join(',');
  $('#t').val(strSelectedVals );
 });

The jQuery makes all click-changes on checkboxes within the element with id="ul_check", to get all elements of type checkboxes that are checked WITHIN the id="ul_check" element, then create an appended ('glued') string with a comma ',' in between the values. Without the onClick in each checkbox, you are separating jQuery/javascript from HTML, so it all becomes cleaner and overseeable. Also, the jQuery could work on class="check", but it would then check other elements with that class, so ID is better for this jQuery suggestion. I am assuming that you have a element, instead of a textarea? If textarea, use:

$('#t').text(strSelectedVals);

strSelectedVals will contain something like "0,10,100" depending on which checkboxes you selected. (With PHP, you can, if you wish, then do an explode(",", $POST["[...]"]) to get all values, etc...)

Get values of all checkboxes in child elements

2 Answers2