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>