How to change Checkbox with Dropdownlist onChange in ASP.NET MVC Table?

Question

I am developing a site with ASP.NET MVC and Razor, I have in one of my pages a table with some columns.

I have in this table a State column whose has a Checkbox and another column containing a Dropdownlist with some options.

I would like to change the value of the Dropdownlist, the value of the Checkbox was also changed to check, because I use the checked lines to send to the controller.

I’ve tried using the parents (Jquery) in the element, but I get an answer that parents don’t support.

Could someone help?

VIEW

<table class="table table-condensed table-bordered table-striped table-hover table-reflow">
    <thead class="thead-inverse">
        <tr>
            <th class="text-center bs-checkbox"><input type="checkbox" /></th>
            <th class="text-center col-md-5">Emitente</th>
            <th class="text-center">Manifestação</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.listaManifestacao)
        {
            <tr id="@item.Id">
                <td class="text-center">
                    <div class="bs-checkbox"><input type="checkbox" /></div>
                </td>                    
                <td class="text-center">@item.Emitente</td>
                <td class="text-center">
                    @Html.DropDownListFor(m => item.CodigoEvento, new SelectList(Model.listaOpcoesManifestacao, "Id", "Descricao", item.CodigoEvento), new { @class = "form-control", onchange = "CheckState(this);" })
                </td>
            </tr>
        }
    </tbody>
</table>

Answer 1

No Jquery, Pure Javascript Only.

function check() {
    document.getElementById("red").checked = true;
}

function muda(){
  
   for(var i=0;i<document.getElementsByName("letras").length;i++)
      document.getElementsByName("letras")[i].checked = false;
  
  var x = document.getElementById("mySelect").value;
  for(i=0;i<=4;i++)
    
        document.getElementById(x).checked = true;
  
}

<select id="mySelect" onchange="muda()">
  <option value="a">A
  <option value="b">B
  <option value="c">C
  <option value="d">D
</select>
<br><br>


<input type="radio" name="letras" id="a">A<br>
  <input type="radio" name="letras" id="b">B<br>
  <input type="radio" name="letras" id="c">C<br>
  <input type="radio" name="letras" id="d">D

Answer 2

I think this column of your table is redundant. Your question was not very clear, but I read in one of your comments that you cannot update the checkbox column in the database. This is because your checkbox doesn’t even reach the controller, since in your code it doesn’t have a name.

And when you name it, it needs to comply with some rules so that the Binder model can do its job. For a better understanding of how Collections Modelbinding works in Aspnet Mvc 5, see the solution for that question. It’s probably what you need. For a full explanation see this article

And to mark the checkbox with jquery (I did not test the code)

function checkState(element) {
    var checkbox = $(element).closest('input[type="checkbox"]');
    if ($(element).val() === ''){
        checkbox.prop('checked', false);
    } else {
        checkbox.prop('checked', true);
    }
}