Question

这里我需要获取所选的单选按钮值（123,456,789）并将其分配给valueee div元素？我使用了document.getElementsById，但无法得到我需要的东西。任何帮助都将受到高度赞赏。

的index.html

<!DOCTYPE html>
<html>
<head>
<title>Radio Button Selection</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#radio_submit").click(function (e) {
     var checked_option_radio = document.getElementsByName("deff").value;
        if(checked_option_radio===undefined)
            {
                alert('Please select options!');
            }else{
                 alert("inside else");
                 $('#valueee').html(checked_option_radio);  

            }
    });
});

</script>
</head>
<body>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val1">123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options"  /> 
</div>
<div name="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options"  /> 
</div>
<div name="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val4">675</div>
<span>JS</span>
<br></br>


<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
</body>
</html>

Answer 1

的jQuery

$(document).ready(function() {
    $("#radio_submit").click(function (e) {
        var checked_option_radio = $("input[name=user_options]:checked").val();
    });
});

完整代码

$(document).ready(function() {
    $("#radio_submit").click(function (e) {
     var checked_option_radio = $("input[name=user_options]:checked").val();
     if(checked_option_radio===undefined){
          alert('Please select options!');
     }else{
          alert("inside else");
          $('#valueee').html(checked_option_radio);  
     }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" value="456"/>
</div>
<div name="deff" id="val1" x>123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" value="456" /> 
</div>
<div name="deff" id="val2" >456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" value="678" /> 
</div>
<div name="deff" id="val3" >678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" value="675" />
</div>
<div name="deff" id="val4" >675</div>
<span>JS</span>
<br></br>


<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>

检查 `jsFiddle`

Answer 2

I am adding a class for selected radio button parent div,based on the class I am getting the next div text and printing in the desired place using Jquery.

将name = deff重命名为class = deff。

    $("#radio_submit").click(function (e) {
    var checked_option_radio = $(this).closest('form').find('div').hasClass('selected');
    if(checked_option_radio) {
        var hello = $('.selected').next('.deff').text();
        $('#valueee').html(hello);
    } else {
        alert('nothing selected');
        var hello2 = "no radio button is selected"
        $('#valueee').html(hello2);
    }
 });
$('input').on('click',function(){
    if (!$("input").is(':checked')) {
                              $(this).parent().addClass('selected').siblings().removeClass('selected');
    }
    else {
             $(this).parent().addClass('selected').siblings().removeClass('selected');
    }
});


<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val1">123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options"  /> 
</div>
<div class="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options"  /> 
</div>
<div class="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val4">675</div>
<span>JS</span>
<br></br>


<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>

http://jsfiddle.net/silpa/xeb9hoyr/2/

以下是获取输入值的更新代码

var check_div = $('.selected').next().is('div');
        var check_input = $('.selected').next().is('input');
        var div_value = $('.selected').next('.deff').text();
        var input_value = $('.selected').next('input').val();
        if(check_div){     
            $('#valueee').html(div_value);
        }
        if(check_input){
         $('#valueee').html(input_value);    
        }

http://jsfiddle.net/silpa/xeb9hoyr/9/

Answer 3

因为你实现了jquery库使用

 $('#divid').val(somevalue);

jQuery如何从单选按钮获取div元素值并将值赋给特定的div

3 个答案:

的jQuery

完整代码

检查 `jsFiddle`

jQuery如何从单选按钮获取div元素值并将值赋给特定的div

3 个答案:

的jQuery

完整代码

检查 jsFiddle

检查 `jsFiddle`