Here, I have a drop-down which has options with values and also there are check boxes which have same values as of drop-down box. so what I am trying to do is when I select the option from drop-down the check box with same value should get selected.

for ex. if I select the option designer from the drop-down, the checkbox related to designer should get selected because they will have the same value.if I select the engineer from the drop-down, then the engineer check box should get selected and other check boxes should get unchecked. how can I do this?

here is what i have tried:

<select id="task_for_role" class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
    </select>


    <input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
    <input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
    <input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>


    <script type="text/javascript">
        $(function(){
            $('#task_for_role').change(function() {
                var selected = $('#task_for_role option:selected');
                if (selected.val() == "null") {
                    $('input[name="role[]"]').prop('checked', false);
                }
                else {
                    $('input[name="role[]"]').prop('checked', true);
                }
            });
        });
    </script>

Here, I have a drop-down which has options with values and also there are check boxes which have same values as of drop-down box. so what I am trying to do is when I select the option from drop-down the check box with same value should get selected.

for ex. if I select the option designer from the drop-down, the checkbox related to designer should get selected because they will have the same value.if I select the engineer from the drop-down, then the engineer check box should get selected and other check boxes should get unchecked. how can I do this?

here is what i have tried:

<select id="task_for_role" class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
    </select>


    <input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
    <input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
    <input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>


    <script type="text/javascript">
        $(function(){
            $('#task_for_role').change(function() {
                var selected = $('#task_for_role option:selected');
                if (selected.val() == "null") {
                    $('input[name="role[]"]').prop('checked', false);
                }
                else {
                    $('input[name="role[]"]').prop('checked', true);
                }
            });
        });
    </script>

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 17, 2017 at 6:49 Ceejay asked Feb 17, 2017 at 6:40 CeejayCeejay 7,3051919 gold badges6666 silver badges109109 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can use value attribute to achieve this

$(function () {
 $('#task_for_role').change(function () {
   var val = $(this).val();
   $('input[name="role[]"]').prop('checked', false);
   $('input[name="role[]"][value=' + val + ']').prop('checked', true);

  });
});

Also you have specified id twice for the select so remove one

<select class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
</select>

NOTE

I have written code such that only one checkbox would be checked at a time if you need multiple checkboxes to be checked remove this line

$('input[name="role[]"]').prop('checked', false);

You have two id attribute in your select tag! id="task_for" and id="task_for_role"

Should be corrected to:

<select class="multi-selector" id="task_for_role" name="task_for">

And you have wrong value assignment:

var selected = $('#task_for_role option:selected');
if (selected.val() == "null") {

should be:

var selected = $('#task_for_role');
if (selected.val() == "null") {

or ...

var selected = $('#task_for_role option:selected');
if (selected.attr('value') == "null") {

try this It's work:

HTML

<select class="multi-selector" id="task_for_role" name="task_for">
        <option value="0">Select</option>
        <option value="3">Engineer</option>
        <option value="4">Designer</option>
        <option value="5">Architect</option>
    </select>


<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>

Script

<script type="text/javascript">
    $(function () {
        $('#task_for_role').change(function () {

            if ($('#task_for_role').val() == "0") {
                $('input:checkbox').prop('checked', false);
            }
            else {
                $('input:checkbox').prop('checked', false);
                $('input[value=' + $('#task_for_role').val() + ']:checkbox').prop('checked', true);
            }
        });
    });
</script>

$('#task_for_role').change(function() {
  var selected = $('option:selected', this).val();
  console.log(selected)
  $(':checkbox[value=' + selected + ']').prop('checked', true);
  $(':checkbox[value=' + selected + ']').siblings().prop('checked', false);
}).change();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
    </select>


<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>

Remove one other id attribute on the select element

This could have done this way. You have two id in same element which is not allowed so i have ignored the first one and uses #task_for_role.

It also work when the document is loading as i have fired .change() at the end.

$('#task_for_role').change(function() {
    var selected = $(this).val();
    $('input[type="checkbox"]').attr('checked', false);
    $('input[value="' + selected + '"]').prop('checked', true);
}).change();

$(function() {
  $('#task_for_role').change(function() {
    var selected = $(this).val();
    $('input[type="checkbox"]').attr('checked', false);
    $('input[value="' + selected + '"]').prop('checked', true);
  }).change();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
    </select>


<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>