如何通过复选框打开不同的URL？

这是我的HTML和JavaScript代码如何通过复选框打开不同的URL？

<input type="text" id="text" /> 
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://example.com/' + document.getElementById('text').value);" />

如果在表格框输入anytext并点击提交按钮，它会打开http://example.com/anytext。我想添加三个名为page1page2和page3的复选框。如果我点击复选框page1并点击提交按钮，它将打开http://example.com/page1/anytext

我该怎么办？

来源

2017-08-20 user8481790

我会建议在复选框上单选按钮。复选框可能会导致你像'http：// example.com/page1/page2/page3/anytext'这是不是我想的。 – rndus2r

@ rndus2r我该如何添加单选按钮？ – user8481790

https://www.w3schools.com/html/html_forms.asp – rndus2r

您可以创建一个处理复选框值的函数，并返回需要插入到window.open调用中的字符串。事情是这样的：

onClick="javascript: window.open('http://example.com/' +getRadioValue() + document.getElementById('text').value);"

而且，请注意，代码段不会重定向你当你点击提交，由于它的沙盒限制，但你可以看到在浏览器控制台错误和代码试图页面重定向你。

function getRadioValue() { 
 
    var cb1 = document.getElementById("cb1"); 
 
    var cb2 = document.getElementById("cb2"); 
 
    var cb3 = document.getElementById("cb3"); 
 
    
 
    if(cb1.checked) { 
 
    return "Page 1/"; 
 
    } else if(cb2.checked) { 
 
    return "Page 2/"; 
 
    } else if(cb3.checked) { 
 
    return "Page 3/"; 
 
    } else { 
 
    return ""; 
 
    } 
 
}

<input type="text" id="text" /> 
 
<br/> 
 
<label> 
 
<input type="checkbox" value="Page 1" id="cb1" /> 
 
Page 1 
 
</label> 
 
<br/> 
 
<label> 
 
<input type="checkbox" value="Page 2" id="cb2" /> 
 
Page 2 
 
</label> 
 
<br/> 
 
<label> 
 
<input type="checkbox" value="Page 3" id="cb3" /> 
 
Page 3 
 
</label> 
 
<br/> 
 
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://example.com/' +getRadioValue() + document.getElementById('text').value);" />

来源

2017-08-20 03:56:02 Nisarg

这是很容易的jQuery做。这是我认为你需要的。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
      crossorigin="anonymous"></script> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <input type="text" id="text" /><br /> 
    page1<input type="checkbox" id="page1" value="page1" />&nbsp; 
    page2<input type="checkbox" id="page2" value="page2" />&nbsp; 
    page3<input type="checkbox" id="page3" value="page3" />&nbsp; 
    <input type="button" id="btn" value="Submit" /><br /> 

    <script type="text/javascript"> 
     $(document).ready() 
     { 
      //Event handler fro button click 
      $('#btn').click(function() 

       { 
       var text = $('#text').val(); 
       if($('#page1').is(':checked')) 
       { 
        window.open('http://example.com/' + $('#page1').val() + '/' + text); 
       } 
       else if($('#page2').is(':checked')) 
       { 
        window.open('http://example.com/' + $('#page2').val() + '/' + text); 
       } 
       else if($('#page3').is(':checked')) 
       { 
        window.open('http://example.com/' + $('#page3').val() + '/' + text); 
       } 
       else 
       { 
        alert('Please select a checkbox'); 
       } 
      }); 
     } 
    </script> 
</body> 
</html>

来源

2017-08-20 04:16:11

如何通过复选框打开不同的URL？

回答

相关问题