我是Javascript /HTML/ CSS的新手，正在努力根據(jù)單選按鈕的選擇顯示不同的數(shù)據(jù)。我想根據(jù)單選按鈕1或2是否被選中，對我的數(shù)據(jù)庫運(yùn)行一個(gè)不同的查詢，我不知道可以使用什么方法來這樣做。如何存儲(chǔ)和使用某個(gè)單選按鈕被選中的信息？

在我的Javascript文件中:

`html = html + """
            <p id='dataTitle'>Global population and average temperature for:</p>
            <div class="radio-wrapper">
            <input type="radio" id="option1" name="radioOptions" value="option1">
            <label for="option1">1750</label>

            <input type="radio" id="option2" name="radioOptions" value="option2">
            <label for="option2">2013</label>
            </div>


            """; `

在我的CSS文件中:

`.radio-label {
display: block;
margin-top: 300px;
margin-bottom: 100px;
}

.radio-label input\[type="radio"\] {
display: none;
}

.radio-label input\[type="radio"\] + label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 26px;
height: 26px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 32px;
}

.radio-label input\[type="radio"\]:checked + label:before {
background-color: #e3a541;
}

.radio-wrapper {
display: flex;
padding-top: 40px;
align-items: center;
flex-direction: row;
}

.radio-wrapper input\[type="radio"\] {
display: none;
}

.radio-wrapper label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 80px;
margin-right: 0px;
background-color: #D88B1F;
border: 1px solid #050404;
border-radius: 10px 0 0 10px;
cursor: pointer;
}
.radio-wrapper input\[type="radio"\]\[value="option2"\] + label {
border-radius: 0 10px 10px 0; /\* Rounded right corners for Option 2 \*/
}

.radio-wrapper input\[type="radio"\]:checked + label {
background-color: #A86E1E;
color: black;
}`

我嘗試過實(shí)現(xiàn)事件監(jiān)聽器，但沒有成功。