jQuery how to get div element value from radio button and assign value to a specific div
Question
Here I need to get the selected radio button value (123,456,789) and assign it to valueee div element? I used document.getElementsById , but couldn't get what I need. Any help would be highly appreciated.
<!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>
3 answers
solution1
1 ACCPTED 2014-11-11 12:25:10
jQuery
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_option_radio = $("input[name=user_options]:checked").val();
});
});
Full Code
$(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>
Check jsFiddl e
solution2
1 2014-11-11 13:09:08
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.
Rename the name=deff to 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/
Here is the updated code to get input value
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);
}
solution3
-1 2014-11-11 12:21:33
因为你有 jquery 库实现使用
$('#divid').val(somevalue);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to get text value from radio button and assign value to a specific div
Assign jQuery datepicker to div element and get the value
Get all the value of a radio button that is checked in a specific div
JavaScript: How to assign value of button element to another div element?
How to get specific span's value from div in JQuery
unable to get radio button value on a div in javascript
How to get the value of the currently selected radio button inside a div using jquery?
In jquery How to find the radio button Value which is in the inner div while chicking on radio button
Get value from DIV element
Get radio button value of child element jQuery
Related Tags