javascript - 如何获取由div分隔的单选按钮的值？

Question

我有 3 个单选按钮，虽然它们都共享相同的 name，但出于视觉目的，它们被封装在自己的 Divs 中。问题是，当我尝试检索单选按钮(又名选定按钮)的值时，它返回错误 ReferenceError: editList is not defined 在 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。

然后您对所有三个单选按钮使用相同的值，这无助于您理解用户选择的内容。

最后，在您的脚本中，您需要在访问其值之前查询选中的单选按钮document.querySelector('.radioInputStyle:checked')

所以

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>