如何创建一个框来选择大小，就像下面的链接中一样，只使用HTML、CSS和JavaScript

Question

我想创建一个字段来为我的页面选择完全相同的大小"箱子大小"；在下面的链接中。我刚开始学习HTML、CSS和javascript。

https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT42LL/A&option.watch_bands=MXP72AM/A&preSelect=false&乘积=Z0YQ&步骤=细节#

table {
table-layout:auto; 
width: 100%;
border-collapse: collapse;
border: 2px solid black;
height: 30px;
font-size: large;
font-weight: bold;
}
table tr td {
padding: 10px;
}

<div class="case-size">
<table id="my-table" onclick="changeBorderColor()">
<tr>
<td>40mm</td>
<td rowspan="2" style="text-align: right;">From $399</td>
</tr>
<tr>
<td><small>Case fits 130-200mm wrists.</small></td>
</tr>
</table><br>
<table>
<tr>
<td>44mm</td>
<td rowspan="2" style="text-align: right;">From $429</td>
</tr>
<tr>
<td><small>Case fits 140-220mm wrists.</small></td>
</tr>
</table>
</div>

Answer 1

这些代码应该会对您有所帮助这样做不需要JavaScript。普通CSS具有实现此目的所必需的逻辑

使用无线电输入，以便只能选择给定选项中的一个。使用CSS伪类选择器:checked来检查输入是否被检查。使用输入消除了您正在尝试的onclick逻辑的所有担忧。+选择器是相邻的同级选择器，它直接选择旁边的同级选择器。

说到功能，请使用onchange事件处理程序而不是onclick。

阅读代码应该向你解释清楚。查看此答案底部的进一步阅读部分。请毫不犹豫地对您的问题发表评论。

/*Do not focus on the numbers, 
they are taken from the webpage given in your question to match the exact style*/
input.size-button-input[type="radio"] {
display: none;
}
label.size-button-label {
font-family: 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
font-size: 17px;
line-height: 1.23543;
font-weight: 400;
letter-spacing: -.022em;
color: #333;
width: 400px;
min-height: 4.88235rem;
padding: .70588rem .88235rem;
margin-top: .82353rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
border: 1px solid #d6d6d6;
border-radius: 4px;
box-sizing: border-box;
border-spacing: 0;
background-color: hsla(0, 0%, 100%, .8);
overflow: hidden;
cursor: pointer;
}
.size-button-label .size-text {
font-weight: bold;
}
.size-button-label .desc {
margin-top: 4px;
font-weight: normal;
font-size: 12px;
line-height: 1.33341;
font-weight: 400;
letter-spacing: -.01em;
}
input.size-button-input:checked+label.size-button-label {
box-shadow: 0 0 0 .11765rem #0070c9;
border-color: transparent;
}
label.size-button-label:hover {
border-color: #888;
}
label.size-button-label:active {
box-shadow: 0 0 0 0.17647rem rgba(131, 192, 253, .5);
outline: none;
}

<input type="radio" name="size" id="size1" class="size-button-input" onchange="//Your Function" checked>
<label for="size1" class="size-button-label">
<div class="size-text">40mm
<div class="desc">Case fits 130-200mm wrists.</div>
</div>
<div class="price-text">From $399</div>
</label>
<input type="radio" name="size" id="size2" class="size-button-input" onchange="//Your Function">
<label for="size2" class="size-button-label">
<div class="size-text">44cm
<div class="desc">Case fits 140-220mm wrists.</div>
</div>
<div class="price-text">From $429</div>
</label>

进一步阅读：

• CSS选择器：MDN上的组合器
• ：checked-MDN上的CSS
• ：已选中CSS技巧
• MDN上的onchange事件处理程序