Unable to set property 'selected' using JS

Question

I have a series of CheckBox elements whose Id matches the values of tags within the same form.

My intention is that, when I Check a checkbox, the tag gets selected.

When I uncheck the checkbox, the tag gets deselected.

This implementation is for a select tag with multi-select.

JS code

    function setPermissions(val) {
    var checkBox = document.getElementById(String(val));

    if (checkBox.checked) {
        $("#permissions option[value=" + val + "]").prop("selected", false);
    }
    else {
        console.log("!checked", val);
        $("#permissions option[value=" + val + "]").prop('selected', true);
        //$("#permissions option[value=" + val + "]").attr('selected', 'selected');
    }
}

Checkbox

   @foreach (var p in ViewBag.Permissions)
    {
        <li class="form-control">
            <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="@p.id" id="@p.id" onclick="setPermissions(@p.id)">
            <label for="@p.id">
                @p.name
            </label>
        </li>
    }

Select

<select id="permissions">
@foreach (var item in ViewBag.Permissions)
{
    <option value="@item.id"></option>
}

Answer 1

Use onchange instead of onclick

Answer 2

Not 100% sure what you want it to do, but this might solve your problems

function setPermissions(obj) {
  $("#permissions option[value=" + obj.value + "]").prop('selected', obj.checked);
}

Demo

function setPermissions(obj) {
  $("#permissions option[value=" + obj.value + "]").prop('selected', obj.checked);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="form-control">
    <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="test1" id="test1" onclick="setPermissions(this)">
    <label for="test1">
                test1
            </label>
  </li>
  <li class="form-control">
    <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="test2" id="test2" onclick="setPermissions(this)">
    <label for="test2">
                test2
            </label>
  </li>
  <li class="form-control">
    <input class="isCheckbox" style="vertical-align:middle" type="checkbox" value="test3" id="test3" onclick="setPermissions(this)">
    <label for="test3">
                test3
            </label>
  </li>
</ul>
<select id="permissions" multiple>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
</select>

Answer 3

When checkBox.checked is true,you should use prop('selected', true),and when it is false,use prop('selected', false).That's why your js does not work.

function setPermissions(val) {
    var checkBox = document.getElementById(String(val));

    if (checkBox.checked) {
        $("#permissions option[value=" + val + "]").prop("selected", true);
    }
    else {
        console.log("!checked", val);
        $("#permissions option[value=" + val + "]").prop('selected', false);
        //$("#permissions option[value=" + val + "]").attr('selected', 'selected');
    }
}