无法在 javascript 中获取 div 上的单选按钮值答案

【问题标题】：unable to get radio button value on a div in javascript无法在 javascript 中获取 div 上的单选按钮值
【发布时间】：2017-01-14 18:18:00
【问题描述】：

我无法获得选定的单选按钮值。基本上，我在要打印选定单选按钮值的 Html 页面中遇到问题。我想在特定 div 的同一页面上获取值。下面是我的代码。提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

<script type="text/JavaScript">
     function myFunction()
    {
        var input = (document.getElementById('shirt').checked)|| (document.getElementById('trouser').checked) || (document.getElementById('tshirt').checked)|| (document.getElementById('suit').checked);
        var div = document.getElementById('divID');
        div.innerHTML = div.innerHTML + input.value;
    }
    </script>
</head>
<body>
<form action="#" method="post" id="demoForm">
    <div class="controls option block-1">
        <div class="col-sm-3 col-md-3 prod-left-text"> 
            <h3> Garments Type</h3>
            <p class="subtitle">Please choose your garments.</p>
        </div>

        <div class="col-sm-9 col-md-9">

            <div class="col-md-3 col-sm-6 col-xs-12 option-value form-group">
               <label class="rad">
        <input type="radio" name="garments" value="shirt" id="shirt" onkeypress="myFunction()" >
                <div><p class="producth6">Shirt<br /><span class="producth7">Rs. 400/-</span><br /><span class="producth8">onwords</span></p>
                    </div>
                </label>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12 option-value form-group" >
                <label class="rad">
                <input type="radio" name="garments" value="trouser" id="trouser" onkeypress="myFunction()">
                    <div><p class="producth6">Trouser<br /><span class="producth7">Rs. 400/-</span><br /><span class="producth8">onwords</span></p></div>
                </label>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12 option-value form-group">
                <label class="rad">
                    <input type="radio" name="garments" value="Tshirt" id="tshirt" onkeypress="myFunction()">
                    <div><p class="producth6">T-shirt<br /><span class="producth7">Rs. 500/-</span><br /><span class="producth8">onwords</span></p>
                    </div>
                </label>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 option-value form-group">
                <label class="rad">
                    <input type="radio" name="garments" value="suit" id="suit" onkeypress="myFunction()">
                    <div><p class="producth6">Salwar-Suit<br /><span class="producth7">Rs. 675/-</span><br /><span class="producth8">onwords</span></p>
                    </div>
                </label>
            </div>
            <div class="clearfix"></div>
            <div style="height:80px;">
                <center>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10" style="float: none;display: inline-block;">

                    </div>
                </center> 
            </div>   
                 <p><button type="button" value="submit">Get Value of Selected</button></p>


        <!-- Div where i want to put the selected radio valur -->
    <div id="divID"></div>    
</div>
</form>
</body>
</html>

【问题讨论】：

input 你试图得到返回真或假。你应该得到实际的元素

标签： javascript html checkbox radio-button

【解决方案1】：

您可以将 querySelector 用于 javascript-

<script type="text/JavaScript">
 function myFunction()
{
    var input = document.querySelector('input[name="garments"]:checked').value;
    var div = document.getElementById('divID');
    div.innerHTML = div.innerHTML + input+"<br>";
}
</script>

【讨论】：

检查这个小提琴并记住在'onchange'事件上使用myFunction-jsfiddle.net/abhishekcs139/enn3k5xz/1
感谢它正在工作，但有点令人困惑。如果用户选择西装并改变主意并选择 T 恤，那么您的代码会显示这两个值。不应该，我想通过提交按钮获得价值
为此，您应该在提交按钮上使用该功能-在这里查看jsfiddle.net/abhishekcs139/enn3k5xz/3
@nadygold 你明白了吗？如果是，请选择您的正确答案。谢谢

【解决方案2】：

要获取选中的单选按钮值，您可以使用 jQuery： $('[name=garments]:checked').val()

【讨论】：