javascript - 没有在单选按钮上进行默认检查

Question

我有 10 个具有唯一名称的单选按钮，这些单选按钮分为两个 div。我的意思是每个 div 有 5 个单选按钮，我想在选中第一个单选按钮的情况下一次只显示一个 div。我想要的是可见的 div 应该默认选中第一个单选按钮。但请注意，所有单选按钮在同一页面上都有唯一的名称。

下面是我的代码供引用。

<style>
#secondopt, #firstopt { display: none;}
</style>

<script>
function checkme(){
if (document.getElementById("opt1").checked == true){
document.getElementById("firstopt").style.display = "block"
document.getElementById("secondopt").style.display = "none";
}
if (document.getElementById("opt2").checked  == true){
document.getElementById("firstopt").style.display = "none"
document.getElementById("secondopt").style.display = "block";
}
}   
</script>

<form name="form1">
<label><input type="radio" name="opt" id="opt1" onclick="checkme()" /> First opt</label>
<label><input type="radio" name="opt" id="opt2" onclick="checkme()" /> Second Opt</label>
<div id="firstopt">
<label><input type="radio" name="items" value="data1" />Item 1</label>
<label><input type="radio" name="items" value="data2" />Item 2</label>
<label><input type="radio" name="items" value="data3" />Item 3</label>
<label><input type="radio" name="items" value="data4"/>Item 4</label>
<label><input type="radio" name="items" value="data5"/>Item 5</label>
</div>
<div id="secondopt">
<label><input type="radio" name="items" value="data6"/>Item 6</label>
<label><input type="radio" name="items" value="data7"/>Item 7</label>
<label><input type="radio" name="items" value="data8"/>Item 8</label>
<label><input type="radio" name="items" value="data9"/>Item 9</label>
<label><input type="radio" name="items" value="data10"/>Item 10</label>
</div>
</form>

如何实现？

Answer 1

因为你在两个 div 中划分了单选按钮，你还应该使用组属性/单选名称 纽扣。这里给出两个不同的组名称，然后使用单选按钮 id 使用 selected/checked 属性。