Modify this function to display all the checked checkboxes' values (instead of last selected)

Question

I am replicating the functionality of a select/multiselect element and I'm trying to use this function to display the items which have been selected in the relevant container. I need to show all the values that have been selected in a comma-separated list, but it's currently only showing one selection (the last one made). It's also displaying the checkbox, background color, etc. of the list item selected instead of the checkbox value (i.e. value="Black").

I'm using this for a few multiselect form elements where I couldn't use the jQuery UI MultiSelect Widget because they needed to be styled in a very specific way (options displayed with background colors or images and spread out over several columns, etc.).

I've included the relevant code below, and I've posted a working example of the styled 'faux'-multiselect element here: http://jsfiddle.net/chayacooper/GS8dM/2/

JS Snippet

$(document).ready(function () {
    $(".dropdown_container ul li a").click(function () {
        var text = $(this).html();
        $(".dropdown_box span").html(text);
    });
    function getSelectedValue(id) {
        return $("#" + id).find("dropdown_box span.value").html();
    }
});

HTML Snippet

<div class="dropdown_box"><span>Colors</span></div>

<div class="dropdown_container">
<ul>
<li><a href="#"><div style="background-color: #000000" class="color" onclick="toggle_colorbox_alt(this);" title="Black"><div class=CheckMark>&#10003;</div>
<input type="checkbox" name="color[]" value="Black" class="cbx"/></div>Black</a>
</li>
<!-- More list items with checkboxes -->
</ul>
</div>

I've tried several other methods (including many of the ones listed here: How to retrieve checkboxes values in jQuery), but none of those worked with hidden checkboxes and/or the other functions I need to incorporate in these particular form elements.

score 1 · Accepted Answer · edited Feb 28 '13 at 19:55

1

well, to start with change click(..){..} in document.ready to

$(".dropdown_container ul li a").click(function () {
    var text = $(this).html();
    var currentHtml = $(".dropdown_box span").html(); 
    var numberChecked = $('input[name="color[]"]:checked').length;
    $(".dropdown_box span").html(currentHtml.replace('Colors','')); 
    if (numberChecked > 1) { 
        $(".dropdown_box span").append(', ' + text); 
        } else { 
        $(".dropdown_box span").append(text); 
    }
});

this will do the appending of text right. however I couldn't understand the handling of images in the code.

Update, to handle just the value: replace var text = $(this).html(); with

var text = $(this).find("input").val();

edited Feb 28 '13 at 19:55

Chaya Cooper

2,566
2
38
67

answered Feb 26 '13 at 07:52

Aditya Jain

1,077
1
12
25

That fixed my first problem :-D The other issue is that instead of appending the value of the checkbox (i.e. Black), it's appending the actual checkbox, background color, etc. – Chaya Cooper Feb 26 '13 at 08:01
@ChayaCooper: Updated answer to handle just the value part. – Aditya Jain Feb 26 '13 at 09:01
That's exactly what I needed :-D Thank you so much! I modified your code slightly so that the values would be displayed in a comma-separated list (instead of merging into one long word ;-) ) – Chaya Cooper Feb 28 '13 at 19:55

score 0 · Answer 2 · answered Feb 26 '13 at 08:53

0

It might be easier to just grab all the values of the check boxes whenever the click event is triggered and then append the values to your span. Like http://jsfiddle.net/9w95b/

I would also suggest not putting the <input> tags inside your <a> tags.

answered Feb 26 '13 at 08:53

jungy

2,932
2
18
17

Modify this function to display all the checked checkboxes' values (instead of last selected)

2 Answers2