jQuery 表单提交按钮根据所选复选框转到 URL

Question

我有一个带有多个复选框的简单联系表单，当用户选择一个复选框时，它应该转到与值中的 url 绑定的 url/文件夹。当前的问题是，当用户选中复选框并单击“提交”，然后返回到该页面并且复选框重置后，提交按钮仍然会将他们带到之前选择的复选框。

需要一种方法来完全重置表单并禁用按钮，以便提交不会让用户感到太困惑。谢谢！

这是我的表单代码：

<form name="frm" id="myForm" method="post" >

  <div class="provider-checkboxes">

    <input type="checkbox" name="rGroup" id="r1" value="folder-1/" onclick="formaction(this)"/>

    <label class="check-div" for="r1">Label 1</label>

    <input type="checkbox" name="rGroup" id="r2" value="folder-2/" onclick="formaction(this)"/>

    <label class="check-div" for="r2">Label 2</label>

    <input type="checkbox" name="rGroup" id="r3" value="folder-3/" onclick="formaction(this)"/>

    <label class="check-div" for="r3">Label 3</label>

    <button type="submit" class="btn btn-primary btn-lg btn-block">Next</button>

  </div>

</form>

这是脚本：

$(document).ready(function(){

  $('input[type="checkbox"]').click(function(){

    var inputValue = $(this).attr("value");

    $("." + inputValue).toggle();

  });

});

$('[data-toggle="btns"] .btn').on('click', function(){

  var $this = $(this);

  $this.parent().find('.active').removeClass('active');

  $this.addClass('active');

});

$('.selectme input:checkbox').click(function() {

  $('.selectme input:checkbox').not(this).prop('checked', false);

});  

$('.provider-checkboxes input:checkbox').click(function() {

  $('.provider-checkboxes input:checkbox').not(this).prop('checked', false);

}); 

function formaction(checkbox){

  document.getElementById("myForm").action = checkbox.value;;

}

function UncheckAll(){ 

  var w = document.getElementsByTagName('input'); 

  for(var i = 0; i < w.length; i++){ 

    if(w[i].type=='checkbox'){ 

      w[i].checked = false; 

    }

  }

}

Answer 1

考虑以下代码。根据您分享的内容，认为这会有所帮助。$(function() {&nbsp; function setFormAction(frm, a) {&nbsp; &nbsp; frm.attr("action", a);&nbsp; }&nbsp; function unCheckAll() {&nbsp; &nbsp; $("input[type='checkbox']").prop("checked", false);&nbsp; &nbsp; $(".provider-checkboxes .btn").hide();&nbsp; }&nbsp; $('.provider-checkboxes input:checkbox').click(function() {&nbsp; &nbsp; unCheckAll();&nbsp; &nbsp; $(this).prop("checked", true);&nbsp; &nbsp; $(".provider-checkboxes .btn").toggle(300);&nbsp; &nbsp; setFormAction($("#myForm"), "./" + $(this).val());&nbsp; &nbsp; console.log($("#myForm")[0]);&nbsp; });&nbsp; unCheckAll();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form name="frm" id="myForm" method="post">&nbsp; <div class="provider-checkboxes">&nbsp; &nbsp; <input type="checkbox" name="rGroup" id="r1" value="folder-1/" />&nbsp; &nbsp; <label class="check-div" for="r1">Label 1</label>&nbsp; &nbsp; <input type="checkbox" name="rGroup" id="r2" value="folder-2/" />&nbsp; &nbsp; <label class="check-div" for="r2">Label 2</label>&nbsp; &nbsp; <input type="checkbox" name="rGroup" id="r3" value="folder-3/" />&nbsp; &nbsp; <label class="check-div" for="r3">Label 3</label>&nbsp; &nbsp; <button type="submit" class="btn btn-primary btn-lg btn-block">Next</button>&nbsp; </div></form>