You are viewing limited content. For full access, please sign in.

Question

Question

How to select checkboxes in one field based off of a selection in another?

Forms
Updated June 23, 2015
asked on June 23, 2015

We have an evaluation form that has 4 sections. Under each section are different job competence indicators that can be selected. For each section there is a drop-down field that has the following values: Meets or Exceeds Standard, Needs Improvement, or Unsatisfactory.

We have had a request that when Meets or Exceeds Standard is selected, to mark all of the job competence checkboxes in the next field. I'm sure this is doable using jQuery, but could someone give me some guidance? Below is part of the form I am referring to.

0 0

Answer

SELECTED ANSWER
replied on June 23, 2015

Here's a generic example:

$(document).ready(function () {
  $('.jobknowledge select').on('change', function () {
    if ($('.jobknowledge select').val() == 3) {
      $('.jobknowledgecheckbox input').prop('checked', true);
    }
  });
});

The Job Knowledge drop down uses the CSS class jobknowledge. I've assigned the values: 3, 2, 1 for the options "Meets or Exceeds Standard" , "Needs Improvement" , and "Unsatisfactory" respectively.

The Job Knowledge Indicators checkbox uses the CSS class jobknowledgecheckbox.

You can repeat this for the other sections.

2 0
replied on June 23, 2015

Alex, thank you for the quick response.

One more challenge for you. For some sections, there may be more than 1 field for job competence indicators. Only 1 will be displayed at a time depending on the value in another field, but is there also a way to make sure that only the job competence indicators are checked for the currently shown field?

0 0
replied on June 23, 2015

Try

$(document).ready(function () {
 
  $('.jobknowledgecheckbox1').hide();
  $('.jobknowledgecheckbox2').hide();
 
  $('.jobknowledge select, .jobknowledgeradio input').on('change', function () {
    if ($('.jobknowledgeradio input:checked').val() == 1) {
      $('.jobknowledgecheckbox2').hide();
      $('.jobknowledgecheckbox1').show();
      if ($('.jobknowledge select').val() == 3) {
        $('.jobknowledgecheckbox1 input').prop('checked', true);
        $('.jobknowledgecheckbox2 input').prop('checked', false);
      }
    } else if ($('.jobknowledgeradio input:checked').val() == 2) {
      $('.jobknowledgecheckbox1').hide();
      $('.jobknowledgecheckbox2').show();
      if ($('.jobknowledge select').val() == 3) {
        $('.jobknowledgecheckbox2 input').prop('checked', true);
        $('.jobknowledgecheckbox1 input').prop('checked', false);
      }
    }
  });
 
});

The Job Knowledge drop down uses the CSS class jobknowledge. I've assigned the values: 3, 2, 1 for the options "Meets or Exceeds Standard" , "Needs Improvement" , and "Unsatisfactory" respectively.

There is then a radio button that determines what job knowledge indicators checkbox gets shown. There are assigned values, 1 and 2. This uses the CSS class jobknowledgeradio.

I then have two checkbox fields that use the CSS class jobknowledgecheckbox1 and jobknowledgecheckbox2 respectively.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...