Question

这是我的HTML和JavaScript代码

<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。我想在表单下添加三个名为page1 page2和page3的复选框。如果我点击复选框page1并点击提交按钮，则会打开http://example.com/page1/anytext

我该怎么做？

Answer 1

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

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

此外，请注意，由于沙箱限制，您在单击提交时不会重定向您的代码段，但您可以在浏览器控制台和代码尝试将您重定向到的页面中看到错误。

＆＃13;

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 "";
  }
}

＆＃13;

<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);" />

＆＃13;

Answer 2

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>

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

2 个答案: