How to add radio button to my website in wordpress - wordpress

Question

I am using WordPress for my website.
I want to add radio buttons to my WordPress page when a radio button is selected I want to display a table below. Can anybody help me

Answer 1

Hello maybe more details help ppl to tell you better answer. but with
this much of information i'v got something for you : this is just
sample. you just need to edit for your specific purpose.
** put html code in wordpress editor ( put in editor section, not visual, visual editor maybe auto convert some tags)
** put js codes into your js script tag some where!! if you don't have any idea just use this plugin
** if jQuery not worked add this lines to function.php of your theme or child-theme to add jQuery library to your page(99% wordpress load it by default) :
// include custom jQuery
function shapeSpace_include_custom_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');
HTML CODE :
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="show-table"></div>
</form>
SCRIPT CODE:
<script>
jQuery(document).ready(function ($) {
$("input").on("click", function () {
var checkedNode = $("input:checked").val();
var orangTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>orang</td></tr></table>';
var appleTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>apple</td></tr></table>';
var bananaTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>banana</td></tr></table>';
switch (checkedNode) {
case 'orange':
$("#show-table").html(orangTable);
break;
case 'apple':
$("#show-table").html(appleTable);
break;
case 'banana':
$("#show-table").html(bananaTable);
break;
default:
}
}
}
</script>
specific table assigned to each button will display inside div
with id="show-table" when that button selected. you can outspread this
method for what purpose you have. just know this is not efficient
method or best way. it's just a way ..