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() { function setFormAction(frm, a) { frm.attr("action", a); } function unCheckAll() { $("input[type='checkbox']").prop("checked", false); $(".provider-checkboxes .btn").hide(); } $('.provider-checkboxes input:checkbox').click(function() { unCheckAll(); $(this).prop("checked", true); $(".provider-checkboxes .btn").toggle(300); setFormAction($("#myForm"), "./" + $(this).val()); console.log($("#myForm")[0]); }); unCheckAll(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="frm" id="myForm" method="post"> <div class="provider-checkboxes"> <input type="checkbox" name="rGroup" id="r1" value="folder-1/" /> <label class="check-div" for="r1">Label 1</label> <input type="checkbox" name="rGroup" id="r2" value="folder-2/" /> <label class="check-div" for="r2">Label 2</label> <input type="checkbox" name="rGroup" id="r3" value="folder-3/" /> <label class="check-div" for="r3">Label 3</label> <button type="submit" class="btn btn-primary btn-lg btn-block">Next</button> </div> </form>