将上次单击的复选框元素设置为在表单提交上选中

Question

我有一个表单，用户可以在其中选择 4 个选项。

<ul>
   <li><input type="checkbox" name="mediaChannelFilter" onchange="this.form.submit()" class="test" value="1" {{ (Request::get('mediaChannelFilter')==1) ? "checked":"" }}>&nbsp;Option 1</li>
   <li><input type="checkbox" name="mediaChannelFilter" onchange="this.form.submit()" class="test" value="2" {{ (Request::get('mediaChannelFilter')==2) ? "checked":"" }}>&nbsp;Option 2</li>
   <li><input type="checkbox" name="mediaChannelFilter" onchange="this.form.submit()" class="test" value="3" {{ (Request::get('mediaChannelFilter')==3) ? "checked":"" }}>&nbsp;Option 3</li>
   <li><input type="checkbox" name="mediaChannelFilter" onchange="this.form.submit()" class="test" value="4" {{ (Request::get('mediaChannelFilter')==4) ? "checked":"" }}>&nbsp;Option 4</li>
 </ul>

当我选择第一个选项时，它工作正常，然后是第二个，然后是第三个和第四个。 {{ (Request::get('mediaChannelFilter')}} 工作正常并使最后点击的元素被选中。但是当我先单击最后一个选项然后我想单击上一个选项时会出现问题。

在我得到的网址中：

http://myapp.com?mediaChannelFilter=1&mediaChannelFilter=4

并且选项四保持选中状态。如何将其取消选中并将例如选项二设置为选中。

现在变成了这样：

http://myapp.com?mediaChannelFilter=2&mediaChannelFilter=4

Answer 1

收音机

我认为您需要radios，因为那样它可能只是checked 的一个选项。
通过它你会得到这样的网址
http://myapp.com?mediaChannelFilter=4

复选框

否则，如果您想允许许多值，因为许多复选框是 checked，那么您可以将参数 name 更改为此 name="mediaChannelFilter[]"
通过它你会得到这样的网址
http://myapp.com?mediaChannelFilter[]=1&mediaChannelFilter[]=4

jQuery

​​>

你也可以这样解决

$(document).ready(function() {
  $('.test').on('change', function() {
    $(this).closest('ul').find('.test').not($(this)).prop('checked', false);
    $(this).closest('form').submit();
  });
});

ul {
  padding: 0px;
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
   <li><input type="checkbox" name="mediaChannelFilter" class="test" value="1" />&nbsp;Option 1</li>
   <li><input type="checkbox" name="mediaChannelFilter" class="test" value="2" />&nbsp;Option 2</li>
   <li><input type="checkbox" name="mediaChannelFilter" class="test" value="3" />&nbsp;Option 3</li>
   <li><input type="checkbox" name="mediaChannelFilter" class="test" value="4" />&nbsp;Option 4</li>
 </ul>