Реализация переключателя, который переключает другие переключатели

Question

Текущий проект, над которым я работаю, включает форму, которая использует модель со списком элементов.

public class BatchModel
{
    public int Id { get; set; 
    public List<Item> Items { get; set; } 
}

public class Item
{
    public int Id { get; set; }
    public int Status { get; set; }
}

Я обновляю статусы в форме с помощью переключателей:

// declare some list of assignable statuses, statusList

// create radio button for each object
for(int i = 0; i < batch.Items.Count; i++)
{
    @Html.HiddenFor(j => batch.Items[i].IdInventory, batch.Items[i].IdInventory);
    @foreach (var status in statusList)
    {
        <td>@Html.RadioButtonFor(j => batch.Items[i].ItemAssignedStatus, status)</td>
    }
}

Я хотел бы также иметь радиокнопку «Мастер» в верхней части формы, которая переключает все радио в форме на заданное значение;как мне этого добиться?

Answer 1

Вот упрощенный пример, использующий только JS и HTML.Я думаю, что это поможет вам структурировать ваш сгенерированный код по мере необходимости.

function toggleit(element) {
   let value = element.value;
   let inputs = document.querySelectorAll(".toggleit[value='" + value + "']");
   for(var i = 0; i < inputs.length; i++) {
            inputs[i].checked = true;   
        }
   
}

<div>Master
<input type="radio" name="master" value="on" id="master_on" onchange="toggleit(this)"  />
<label for="master_on">On</label>
<input type="radio" name="master" value="off" id="master_off" onchange="toggleit(this)"  />
<label for="master_off">Off</label>
</div>
<div>
<div>Foo
<input type="radio" name="foo" value="on" id="foo_on" class="toggleit" />
<label for="foo_on">On</label>
<input type="radio" name="foo" value="off" id="foo_off" class="toggleit" />
<label for="foo_off">Off</label>
</div>
<div>Bar
<input type="radio" name="bar" value="on" id="bar_on" class="toggleit" />
<label for="bar_on">On</label>
<input type="radio" name="bar" value="off" id="bar_off" class="toggleit" />
<label for="bar_off">Off</label>
</div>
</div>