jquery select multiple="multiple" with custom attributes when checkbox is checked one by one

Question

my fiddle http://jsfiddle.net/terveg/MbHVB/4/ my HTML code is:

MULTIPLE CHECKBOXES:
<div class="cck-fl">
    <input type="checkbox" id="user_chosen_groups0" name="user_chosen_groups[]" value="10" checked="checked" class="checkbox validate[require[required_user_chosen_groups]]" size="1" data="49" groups="lovers">
    <label for="user_chosen_groups0">group one</label>
    <input type="checkbox" id="user_chosen_groups1" name="user_chosen_groups[]" value="11" class="checkbox validate[require[required_user_chosen_groups]]" size="1" data="48" groups="breeders">
    <label for="user_chosen_groups1">group two</label>
    <input type="checkbox" id="user_chosen_groups2" name="user_chosen_groups[]" value="12" class="checkbox validate[require[required_user_chosen_groups]]" size="1" data="58" groups="shopers">
    <label for="user_chosen_groups2">group three</label>
</div>
<br />
<br/>
MULTIPLE SELECT:
<div id="cck1r_form_dash" class="cck_form cck_form_select_multiple">
    <select id="#dash" name="dash[]" class="inputbox select" size="10" multiple="multiple">
        <option value="49">group 1 match checkbox-value 10 + value 49</option>
        <option value="48">group 2 match checkbox-value 11 + value 48</option>
        <option value="58">group 3 match checkbox-value 12 + value 58</option>
    </select>
</div>

I'm trying to match multi checkboxes with multi select input. When i check "group one" , "group 1 match checkbox-value 10 + value 49" must be selected and loop for all options.. Logically, IF checbox is unchecked, related select option also must me "unselected". Also I have one option checked by default in my checkbox field, so related option in select also should be checked when page is loaded. By the way, i have also custom attributes data="" for my checkbox...maybe is idea to use this?

I tried ~5 different solutions found here, but no one works. Please help me

Would you please not edit your question to make it harder to read? As much as you may find it intrusive of me to edit your question (to clearly show the code), I really am trying to help. — David Thomas
– David Thomas, Commented Apr 13, 2014 at 23:41

Bill Criswell · Accepted Answer · 2014-04-13 23:48:08Z

0

I got it working, but I don't understand why you need to do this?

var $selectOptions = $('#dash option');

$('input[type=checkbox]').on('change', function () {

    var $checkbox = $(this),
        checked = $checkbox.prop('checked');

    $selectOptions.filter(function () {
      var $option = $(this);
      return $option.val() === $checkbox.attr('data');
    }).prop('selected', checked);

}).trigger('change');

Here is a small demo: http://jsfiddle.net/MbHVB/8/

answered Apr 13, 2014 at 23:48

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

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

Collectives™ on Stack Overflow

jquery select multiple="multiple" with custom attributes when checkbox is checked one by one

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related