如何使用户能够选择两个无线电并以它们的值作为参数执行功能

Question

如何使用户选择一个pokemon单选按钮和一个字符单选按钮，并使用单选按钮值作为参数执行myfunction

此外，在加载html页面时，选择了默认的单选按钮值，有人能告诉我如何禁用吗

我正在使用单选按钮，我绝对不想尝试下拉列表

function myfunction() {}

ButtonState {
display: none;
}
.Button {
padding: 3px;
margin: 4px;
background: #CCC;
border: 1px solid #333;
cursor: pointer;
background-color: white;
box-shadow: 0 3px #999;
color: black;
margin: 4px 2px 4px 2px;
font-size: 16px;
display: inline-block;
text-align: center;
padding: 16px 32px 16px 32px;
border: 2px solid #555555;
border-radius: 12px;
transition-duration: 0.4s
}
.ButtonState:checked+.Button {
background: green;
transform: translateY(4px);
}

<form action="">
<div>
<input type="radio" name="Button" class="ButtonState" checked id="Ash" value="-1" />
<label class="Button" for="Ash">Ash</label>
<input type="radio" name="Button" class="ButtonState" id="Misty" value="-2" />
<label class="Button" for="Misty">Misty</label>
<input type="radio" name="Button" class="ButtonState" id="Brock" value="-3" />
<label class="Button" for="Brock">Brock</label>
<input type="radio" name="Button" class="ButtonState" id="Oak" value="-4" />
<label class="Button" for="Oak">Oak</label>
<input type="radio" name="Button" class="ButtonState" id="Jessie" value="-5" />
<label class="Button" for="Jessie">Jessie</label>
<input type="radio" name="Button" class="ButtonState" id="James" value="-6" />
<label class="Button" for="James">James</label>
<input type="radio" name="Button" class="ButtonState" id="Giovanni" value="-7" />
<label class="Button" for="Giovanni">Giovanni</label>
</div>
<br> <br>
<div>
<input type="radio" name="Button" class="ButtonState" checked id="Pickachu" value="1" />
<label class="Button" for="Pickachu">Pickachu</label>
<input type="radio" name="Button" class="ButtonState" checked id="Bulbasaur" value="2" />
<label class="Button" for="Bulbasaur">Bulbasaur</label>
<input type="radio" name="Button" class="ButtonState" checked id="Charmander" value="3" />
<label class="Button" for="Charmander">Charmander</label><input type="radio" name="Button" class="ButtonState" checked id="Squirtle" value="4" />
<label class="Button" for="Squirtle">Squirtle</label><input type="radio" name="Button" class="ButtonState" checked id="Butterfree" value="5" />
<label class="Button" for="Butterfree">Butterfree</label><input type="radio" name="Button" class="ButtonState" checked id="Pidgeotto" value="6" />
<label class="Button" for="Pidgeotto">Pidgeotto</label><input type="radio" name="Button" class="ButtonState" checked id="Arbok" value="7" />
<label class="Button" for="Arbok">Arbok</label><input type="radio" name="Button" class="ButtonState" checked id="Sandshrew" value="8" />
<label class="Button" for="Sandshrew">Sandshrew</label><input type="radio" name="Button" class="ButtonState" checked id="Jigglypuff" value="9" />
<label class="Button" for="Jigglypuff">Jigglypuff</label><input type="radio" name="Button" class="ButtonState" checked id="Vulpix" value="10" />
<label class="Button" for="Vulpix">Vulpix</label>
</div>
<br>
<input type="submit" value="Go" onclick="myfunction()" />
</form>

Answer 1

1. 将按钮更改为type="button"-您不想提交表单
2. 抓住选定的按钮，但给这些集起不同的名字
3. 除非使用复选框，否则每组只能选中一个
4. 如果不希望选择默认值，请删除"已选中">

function myfunction() {
var checkedName = document.querySelector('input[name="poke-name"]:checked'),
checkedType = document.querySelector('input[name="poke-type"]:checked'),
name = checkedName ? checkedName.value : "Nothing selected",
type = checkedType ? checkedType.value : "Nothing selected"
console.log("name", name, "Type", type);
}
// to remove default checked:
window.addEventListener('load', function() {
var checkedNames = document.querySelectorAll('input[name="poke-name"]:checked'),
checkedTypes = document.querySelectorAll('input[name="poke-type"]:checked');
for (var i=0,n=checkedNames.length; i<n;i++) {
checkedNames[i].checked=false;
}
for (var i=0,n=checkedTypes.length; i<n;i++) {
checkedTypes[i].checked=false;
}
});

ButtonState {
display: none;
}
.Button {
padding: 3px;
margin: 4px;
background: #CCC;
border: 1px solid #333;
cursor: pointer;
background-color: white;
box-shadow: 0 3px #999;
color: black;
margin: 4px 2px 4px 2px;
font-size: 16px;
display: inline-block;
text-align: center;
padding: 16px 32px 16px 32px;
border: 2px solid #555555;
border-radius: 12px;
transition-duration: 0.4s
}
.ButtonState:checked+.Button {
background: green;
transform: translateY(4px);
}

<form action="">
<div>
<input type="radio" name="poke-name" class="ButtonState" id="Ash" value="-1" />
<label class="Button" for="Ash">Ash</label>
<input type="radio" name="poke-name" class="ButtonState" id="Misty" value="-2" />
<label class="Button" for="Misty">Misty</label>
<input type="radio" name="poke-name" class="ButtonState" id="Brock" value="-3" />
<label class="Button" for="Brock">Brock</label>
<input type="radio" name="poke-name" class="ButtonState" checked id="Oak" value="-4" />
<label class="Button" for="Oak">Oak</label>
<input type="radio" name="poke-name" class="ButtonState" id="Jessie" value="-5" />
<label class="Button" for="Jessie">Jessie</label>
<input type="radio" name="poke-name" class="ButtonState" id="James" value="-6" />
<label class="Button" for="James">James</label>
<input type="radio" name="poke-name" class="ButtonState" id="Giovanni" value="-7" />
<label class="Button" for="Giovanni">Giovanni</label>
</div>
<br> <br>
<div>
<input type="radio" name="poke-type" class="ButtonState" id="Pickachu" value="1" />
<label class="Button" for="Pickachu">Pickachu</label>
<input type="radio" name="poke-type" class="ButtonState" checked id="Bulbasaur" value="2" />
<label class="Button" for="Bulbasaur">Bulbasaur</label>
<input type="radio" name="poke-type" class="ButtonState" id="Charmander" value="3" />
<label class="Button" for="Charmander">Charmander</label><input type="radio" name="poke-type" class="ButtonState" id="Squirtle" value="4" />
<label class="Button" for="Squirtle">Squirtle</label><input type="radio" name="poke-type" class="ButtonState" id="Butterfree" value="5" />
<label class="Button" for="Butterfree">Butterfree</label><input type="radio" name="poke-type" class="ButtonState" id="Pidgeotto" value="6" />
<label class="Button" for="Pidgeotto">Pidgeotto</label><input type="radio" name="poke-type" class="ButtonState" id="Arbok" value="7" />
<label class="Button" for="Arbok">Arbok</label><input type="radio" name="poke-type" class="ButtonState" id="Sandshrew" value="8" />
<label class="Button" for="Sandshrew">Sandshrew</label><input type="radio" name="poke-type" class="ButtonState" id="Jigglypuff" value="9" />
<label class="Button" for="Jigglypuff">Jigglypuff</label><input type="radio" name="poke-type" class="ButtonState" id="Vulpix" value="10" />
<label class="Button" for="Vulpix">Vulpix</label>
</div>
<br>
<input type="button" value="Go" onclick="myfunction()" />
</form>