要实现组合单选和输入框中的值,并在单击按钮时打开URL,可以使用HTML、CSS和JavaScript来完成。
首先,需要创建一个HTML表单,包含一个单选框和一个输入框,以及一个按钮。代码示例如下:
<form>
<input type="radio" name="option" value="option1"> Option 1
<input type="radio" name="option" value="option2"> Option 2
<input type="text" id="inputValue">
<button type="button" onclick="openURL()">Open URL</button>
</form>
接下来,需要编写JavaScript函数来获取选中的单选框值和输入框的值,并将它们组合成URL。代码示例如下:
function openURL() {
var selectedOption = document.querySelector('input[name="option"]:checked').value;
var inputValue = document.getElementById('inputValue').value;
var url = 'https://example.com/?option=' + selectedOption + '&input=' + inputValue;
window.open(url);
}
在上述代码中,openURL()
函数首先使用document.querySelector()
方法获取选中的单选框的值,然后使用document.getElementById()
方法获取输入框的值。接着,将这些值组合成URL,并使用window.open()
方法打开该URL。
最后,可以使用CSS样式对表单进行美化,以适应具体的设计需求。
这样,当用户选择单选框和输入框中的值,并单击按钮时,将会打开一个新的浏览器窗口或标签页,显示组合后的URL。
领取专属 10元无门槛券
手把手带您无忧上云