如何获得由div分隔的单选按钮的值？

Question

我有3个单选按钮，虽然它们共享相同的name，但出于视觉目的，它们被封装在自己的Divs中。问题是，当我尝试检索单选按钮（也就是所选按钮）的值时，它会返回错误ReferenceError: editList is not defined at HTMLButtonElement.document.getElementById.onclick (sqlTemplate.html:56)

以下是代码：

   var a;
        
    document.getElementById("submitButton").onclick = function(){
        a = editList.value;
        console.log(a);
    }

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    border: 1px grey solid;
    border-radius: 2px;
    padding: 10px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    width: 150px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
}

#radioButtonCol1 > *{
    display: block;
}

.radioInputStyle{
    margin: 0 auto;
}

.radioLabelStyle{
    
}

#radioSubmitButtonDiv{
    width: 100%;
    margin-bottom: 30px;
}

#submitButton{
    width: 174px;
    display: block;
    border-radius: 2px;
    border: 1px solid grey;
    margin: 0 auto;
}

#submitButton:active{
    background-color: #D0D0D0;
}

<form action="/action_page.php" style="display: inline;">
           
           <div id="radioGroupContainer">
           
            <div id="radioButtonCol1">
                <label for="always" class="radioLabelStyle">Linear</label>
                <input id="radButLinear" type="radio" name="editList" value="always" class="radioInputStyle"/>
            </div>   

            <div id="radioButtonCol1">
                <label for="always" class="radioLabelStyle">Tactile</label>
                <input id="radButTactile" type="radio" name="editList" value="always" class="radioInputStyle"/>
            </div>

            <div id="radioButtonCol1">
                <label for="always" class="radioLabelStyle">Tactile and Clicky</label>
                <input id="radButTandC" type="radio" name="editList" value="always" class="radioInputStyle"/>
            </div>
            
           </div>
        </form>
        
        <div id="radioSubmitButtonDiv">
            
            <button id="submitButton">Submit</button>
            
        </div>

如何在保持价值分离的同时检索价值？

Answer 1

有几个问题。

首先，您在单选按钮上使用双ID，第二个id很常见。所以废弃所有人的第二个id声明。

然后标签的for属性应指向每个输入的正确剩余id。

然后你对所有三个单选按钮使用相同的value，这对你理解用户选择的内容没有帮助。

最后在您的脚本中，您需要在访问其document.querySelector('.radioInputStyle:checked')

之前查询已选中的单选按钮value

所以

var a;
        
document.getElementById("submitButton").onclick = function(){
    a = document.querySelector('.radioInputStyle:checked').value;
    console.log(a);
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    border: 1px grey solid;
    border-radius: 2px;
    padding: 10px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
    width: 150px;
}

#radioButtonCol1 > *{
    display: block;
}

#radioButtonCol1{
    display: inline-block;
    margin: 30px 30px;
}

#radioButtonCol1 > *{
    display: block;
}

.radioInputStyle{
    margin: 0 auto;
}

.radioLabelStyle{
    
}

#radioSubmitButtonDiv{
    width: 100%;
    margin-bottom: 30px;
}

#submitButton{
    width: 174px;
    display: block;
    border-radius: 2px;
    border: 1px solid grey;
    margin: 0 auto;
}

#submitButton:active{
    background-color: #D0D0D0;
}

<form action="/action_page.php" style="display: inline;">
           
           <div id="radioGroupContainer">
           
            <div id="radioButtonCol1">
                <label for="radButLinear" class="radioLabelStyle">Linear</label>
                <input id="radButLinear" type="radio" name="editList" value="linear" class="radioInputStyle"/>
            </div>   

            <div id="radioButtonCol1">
                <label for="radButTactile" class="radioLabelStyle">Tactile</label>
                <input id="radButTactile" type="radio" name="editList" value="tactile" class="radioInputStyle"/>
            </div>

            <div id="radioButtonCol1">
                <label for="radButTandC" class="radioLabelStyle">Tactile and Clicky</label>
                <input id="radButTandC" type="radio" name="editList" value="both" class="radioInputStyle"/>
            </div>
            
           </div>
        </form>
        
        <div id="radioSubmitButtonDiv">
            
            <button id="submitButton">Submit</button>
            
        </div>