javascript - How to get value of radio buttons that are separated by divs?

Question

I have 3 radio buttons, while they all share the same name, for visual purposes, they're encapsulated in their own Divs. The issue is, when I try to retrieve the value of the radio buttons (aka the selected button), it returns an error ReferenceError: editList is not defined at HTMLButtonElement.document.getElementById.onclick (sqlTemplate.html:56)

Here is the code:

   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>

How can I retrieve the value while keeping them separated?

标签： javascripthtmlcss

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>