Question

I’m still new to Javascript and Jquery and am having a little trouble with this one.

I want to be able to pass a value from a fieldset (#a) with a select option to another fieldset (#b) with checkbox options. For example, the fieldset #a has default options 1,2,3,4,5. Fieldset #b can have many more options but must at least include the default from #a.

code snippet for fieldset #a:

      <fieldset id="a">
        <legend><span>Default Option</span></legend>  
        <div class="fieldset_wrapper">
          <select name="form_default">
            <option value="">Select One</option>
            <%=returnValueMap.get("defaultOptionSelect")%>

          </select>
        </div>
      </fieldset>

code snippet for fieldset #b:

         <fieldset id="b">
         <legend><span>Option</span></legend>
            <div class="fieldset_wrapper">
              <div><input type="checkbox" name="select-all" id="select-all" class="checkAll"/>   All Options</div>

        <%=returnValueMap.get("optionSelect")%>

        </div>
      </fieldset>

Edit, here is something I tried but I think I’m obviously missing something. Again, i’m trying to learn this stuff

    $('#a option[name="form_default"]:selected').each(function(){   
                            $('#b input[type="checkbox"]').eq($(this).index()).prop('checked',true);
    });

Answer 1

$('#a select').on('change', function(e){
  e.preventDefault()
  $('#b input[type="checkbox"][value="'+$(this).val()+'"]').prop("checked",true);  
})

Little explanations:

• Spy for changes and call the function on changes $('#a select').on('change', function(e){
• You don’t really need that here, usually it’s to remove the default behavior, for example it prevents changing page on links: e.preventDefault()
• We take the selected value in the select box: $(this).val()
• We select the corresponding checkbox using the Type, and the Value, like: #b input[type="checkbox"][value="value selected in select box"]
• Check the checkbox: .prop("checked",true)

may help you

EDIT: And if you want the default selected option go to b at the page load:

jQuery(function($){
  $('#b input[type="checkbox"][value="'+$('#a select').val()+'"]').prop("checked",true);
});