jQuery 表单提交按钮根据选中的复选框转到 URL答案

【问题标题】：jQuery form submit button goes to URL based on checkbox selectedjQuery 表单提交按钮根据选中的复选框转到 URL
【发布时间】：2020-04-01 15:17:27
【问题描述】：

我有一个带有多个复选框的简单联系表单，当用户选择一个复选框时，它应该转到与值中的 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; 
    }
  }
}

【问题讨论】：

你检查HTMLFormElement.reset()方法了吗？要禁用该按钮，您可以在满足您需要的条件（提交一次后）时在 onSubmit 事件中使用event.preventDefault()。
不幸的是，我的 jquery/javascript 知识非常有限。我让东西看起来很漂亮，并在网上找到代码让东西工作，直到我不能。

标签： javascript jquery html checkbox

【解决方案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>

【讨论】：