如何在新窗口中打开JavaScript单选按钮？

Question

如何在窗口中打开JavaScript单选按钮？ 我在Google上尝试过辛苦但不适合的选项。 另外，我需要将两个按钮合并到一个按钮中，并打开新窗口

我尝试了各种JavaScript Target空白标记，但没有用

function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";
}

// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
    return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
    radioObj.checked = (radioObj.value == newValue.toString());
    return;
}
for(var i = 0; i < radioLength; i++) {
    radioObj[i].checked = false;
    if(radioObj[i].value == newValue.toString()) {
        radioObj[i].checked = true;
    }
}
}

.widget.ContactForm {
    z-index: 1
}

.contact-form-widget {
    margin-left: auto;
    margin-right: auto;
    width:100%;
    max-width:98%;
    padding: 25px 0;
    border:1px solid #b2b2b2;
    -webkit-border-radius: 2%;
    -moz-border-radius: 2%;
    border-radius:3px;
}

.contact-form-widget .form {
    width: 91%;
    margin: 0 auto
}

.ribbon {
    font: 20px Arial;
    text-transform: capitalize;
    position:center;
    background: #6B5F53;
    color: #fff;
    text-align: center;
    padding:7px 0 7px 0;
    margin:0 0 3px 0;
    border-radius:5px;
}

.contactf-name,
.contactf-email,
.contactf-message {
    text-align: left;
    margin-top: 25px;
    color: #000;
    font-size: 13px;
    font-weight:600
   
}

.contactf-name,
.contactf-email {
    float: left;
    width: 100%
}

.contact-form-name,
.contact-form-email,
.contact-form-email-message,
.contact-form-name:hover,
.contact-form-name:focus,
.contact-form-email:hover,
.contact-form-email:focus,
.contact-form-email-message:hover,
.contact-form-email-message:focus {
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 10px;
    font-size: 12px;
    color: #aaa;
    border-color: #cccccc;
    border-top:1px solid #666666;
    border-left:1px solid #666666;
    border-width: 1px;
    box-shadow: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.contact-form-name,
.contact-form-email {
    height: 35px
}

.contact-form-email-message {
    height: 100px
}
.contact-form-button-submit,
.contact-form-button-submit:hover {
    margin-top: 25px;
padding:0 35px 0 35px;
    height: 37px;
    font: bold 18px Arial;
    outline: none;
    letter-spacing: 1px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    text-shadow: 1px 1px 0 #ffe8b2;
    color: #333333;
    border: 1px solid #d6a437;
    background: #febd4b;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fed970) to(#febd4b));
    background: -webkit-linear-gradient(#fed970, #febd4b);
    background: -moz-linear-gradient(#fed970, #febd4b);
    background: -ms-linear-gradient(#fed970, #febd4b);
    background: -o-linear-gradient(#fed970, #febd4b);
    background: linear-gradient(#fed970, #febd4b);
    -pie-background: linear-gradient(#fed970, #febd4b)
}

.contact-form-button-submit:active {
    color: #333333;
    border: 1px solid #d6a437;
    background: #febd4b;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#febd4b) to(#fed970));
    background: -webkit-linear-gradient(#febd4b, #fed970);
    background: -moz-linear-gradient(#febd4b, #fed970);
    background: -ms-linear-gradient(#febd4b, #fed970);
    background: -o-linear-gradient(#febd4b, #fed970);
    background: linear-gradient(#febd4b, #fed970);
    -pie-background: linear-gradient(#febd4b, #fed970)
}

.contact-form-cross {
    border: medium none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 11px !important;
    width: 11px !important;
}
input[type=radio] {
    -webkit-appearance: radio;
    -O-appearance: radio;
    -moz-appearance: radio;
    opacity:1;
}

#header .bottom-header.blog h1 {
    font-size: 64px;
	color: red
}

input[type=radio]:hover + label {
border: solid 1px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;

}  

input[type=radio]:checked + label {
border: solid 2px white; padding: 5px; border-radius: 1px;
border-color : red;
color : red;
opacity:1;
}

input[type=text] {
font-weight:bold;
}
input[type=text]:hover {
}
input[type=email]:hover {
}

<div class="widget ContactForm" id="ContactForm22">
        <div class="ribbon"><strong>Your Billing Details</strong></div>
    <div class="contact-form-widget">
        <div class="form">
            <form name="contact-form">
                <div class="contactf-name">Your name <span style="color:red">*</span> :<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Full Name" size="30" type="text" value="Full Name" onblur='if (this.value == "") {this.value = "Full Name";}' onfocus='if (this.value == "Full Name") {this.value = "";}' /></div>
                <div class="contactf-email">E-mail address <span style="color:red">*</span> :<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}' /></div>
                <div style="clear:both"></div>
                <div class="contactf-message">Your Address <span style="color:red">*</span> :<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Hometown/ City/ Your State...." rows="5" value="" placeholder="Hometown/ City/ Your State...." value="Hometown/ City/ Your State...." onblur='if (this.value == "") {this.value = "Hometown/ City/ Your State....";}' onfocus='if (this.value == "Hometown/ City/ Your State....") {this.value = "";}'></textarea>
                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
                    <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
                </div>
            </form>
        </div>
    </div>
</div>


<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p>&nbsp;<label for="number0"><input type="radio" value="http://www.google.com" name="number"     id="number0"> Zero</label></br>
&nbsp;<label for="number1"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label></br>
&nbsp;<label for="number2"><input type="radio" value="http://www.gamestop.com" name="number" id="number2"> Two</label></br>
</p>
<input type="button" onclick="window.location.href = (getCheckedValue(document.forms['radioExampleForm'].elements['number']));" value="Buy Now">

</form>

Answer 1

根据我的要求，您只想打开一个新选项卡，并将单选按钮值添加到href的末尾。我为您创建了一个基本示例，您可以在下面的项目中继续使用该示例。

var submitEl = document.getElementById('submitRadio')
var radioButtons = document.getElementsByName('number');

    submitEl.addEventListener('click', () => {
        radioButtons.forEach(checkRadioButton);
    });

    function checkRadioButton(item, index) {
        if(item.checked) {
            window.open(window.location.href + '/' + item.value,'_blank');
        }
    }

<input type="radio" name="number" value="zero">Zero
<input type="radio" name="number" value="one">One
<input type="radio" name="number" value="two">Two
<button id="submitRadio">do Stuff</button>

让我知道您是否有任何问题:)

此外，这在堆栈溢出的代码段中将不起作用，但将在您的项目中起作用。