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>
}
Use onchange instead of onclick
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>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');
}
}