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

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

选项四保持检查。如何取消选中并设置，例如，选项2作为选中。

现在它变成了这个：

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>