Question

因此，我试图创建一个函数，在其中具有多个区域复选框。唯一的是，我只有一些地区的页面。因此，当用户选择区域并具有到页面的链接时，在提交时它将带用户到该页面。如果该复选框没有链接，则它将转到联系页面。但是，如果他们选择多个地区，并且其中一个拥有链接，则仍应将其带到同一联系页面。第二部分是我希望将选择内容解析为url进入联系页面，该页面将是联系表单7表单，以便它自动填充他们选择的区域。

到目前为止，我已经创建了一个函数，该函数可以识别选中了多少个复选框。我尝试添加链接并确定是否已选中该复选框。我不确定是否可以通过其相应的元素识别它。

HTML

<a href="https://corporate.territory.place/advertising-sandiego" 
id="salesURL"><input type="checkbox" name="territories" value="San 
Diego, CA">San Diego, CA</a>
<a href="https://corporate.territory.place/advertising-orlando" 
id="salesURL"><input type="checkbox" name="territories" 
value="Orlando, FL">Orlando, FL</a>
<a href="#" id="nosalesURL"><input type="checkbox" 
name="territories" value="Miami, FL">Miami, FL</a><br>
<button onclick="printChecked()">Click here</button>

jquery

function printChecked(){
var items=document.getElementsByName('territories');
/*below list the value of the selections*/
  var selectedItems="";
    for(var i=0; i<items.length; i++){
        if(items[i].type=='checkbox' && items[i].checked==true)
            var itemz = selectedItems+=items[i].value+" ";}

    var n = $("input[name=territories]:checked").length;/*Counts 
number of box selected*/
    var salesUrl = 
document.getElementById("salesURL").getAttribute("href");
    var salesID = 
document.getElementById("salesURL").getAttribute('id');

 if( n >= 1 && salesID == "salesURL"){
$("#info").html("Selected only 1" + " " + salesUrl+" "+itemz);
 }else if(n >= 1 && salesID == "nosalesURL"){
 $("#info").html("Go to contact sales");      
       }else{
$("#info").html("none selected");
}
}

这里是a link to where I am building it out！

由于某种原因，当我尝试为多个选定项设置条件时，它会为我提供第一个条件的结果。我希望函数识别该复选框并确定它们是否具有url。如果超过一个，则转到此页面。它只有一个被选中，并且有一个网址，然后转到另一页。等

Answer 1

由于仅在选中1复选框的情况下才想使用特定的URL，因此可以通过仅查找该事件来简化逻辑。所有其他情况都将导致联系页面。另外，id对于每个元素都应该是唯一的，但是这里甚至不需要它们，因此您应该删除它们（或使其唯一）。

我添加了用于处理重定向的其他功能。

JS

<script type="text/javascript">
function printChecked() {
    var items = $("input[name=territories]:checked"),
        url = "contact.html";

    if (items.length == 1) {
        var href = items.parent("a").attr("href");
        if ($.trim(href).length > 1) {
            url = href;
        }
    }

    redirect(url);
}

function redirect(url) {
    window.location = url;
}
</script>

Answer 2

这是我得出的解决方案。

$( "#territorybtn" ).click(function() {

  var places = $("input[name=territories]:checked");
  var clickTerritory = $("input[name=territories]:checked").val();
  var clickTerritoryUrl = "https://privatecontractor.com/loaction-"+clickTerritory;
  var shortClickTerritoryUrl = clickTerritoryUrl.substr(0, 
clickTerritoryUrl.length-2); 
  var saleID = places.parent("a").attr("class");

  /*below list the value of the selections*/
  var selectedItems="";
     for(var i=0; i<places.length; i++){
    if(places[i].type=='checkbox' && places[i].checked==true)
       var itemz = selectedItems+=places[i].value+" ";}

 /*Conditions*/
  if (places.length == 1 && saleID == "salesURL"){
      window.location = shortClickTerritoryUrl;
  }else if(places.length == 0){
      alert(places.length +" "+ "Choose a Territory");
  }else{
      window.location = "https://privatecontractor.com/contact-sales/?textarea=" + itemz;
  }

});

因此，我正在检查是否已选中复选框及其值。接下来，如果选中多个复选框，我将循环这些值，以便当我将其解析为联系表单的网址时，它将在表单中列出它们。

我放置了条件，以便如果选中一个复选框并且其父锚具有该类，则它将转到基于其值创建的url。如果选择了多个，则他们将联系表单并将值添加到网址中。

对于将复选框的值解析为要发送给联系表的url的第二部分，我使用了这位出色先生的脚本。 https://wplearninglab.com/contact-form-7-get-value-from-url/

感谢您的帮助@johnniebenson。

如何在特定条件下创建转到特定链接的复选框

2 个答案: