JQuery with HTML Radio button

From CoderLearner
Jump to: navigation, search

Example 1

  • Allow to select one button at a time.
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('input:radio[name="fruit"]').click(function(){
                    var fruit =$('input:radio[name="fruit"]:checked').val();
                    $('#content').html(fruit);
                });
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
        <input type="radio" name="fruit" value="Apple"/>Apple
        <input type="radio" name="fruit" value="Banana"/>Banana
        <input type="radio" name="fruit" value="Mango"/>Mango
        <input type="radio" name="fruit" value="coconut"/>Coconut
        <input type="radio" name="fruit" value="pear"/>Pear
        <input type="radio" name="fruit" value="graph"/>Graph
    </body>
</html>

Try It

Get the user selected radio button

var fruit = $('input:radio[name="fruit"]:checked').val();

Set the radio button

  • All the index start from 0
$('input:radio[name="fruit"]')[0].checked = true; // apple or first index of radio button
$('input:radio[name="fruit"]')[1].checked = true; // banana 
$('input:radio[name="fruit"]')[2].checked = true;    // Mango
$('input:radio[name="fruit"]')[3].checked = true;    // Coconut
...

Example 2

  • Set radio button default value to Mango when page load
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('input:radio[name="fruit"]')[2].checked = true; // Mango
                $('input:radio[name="fruit"]').click(function(){
                    var fruit = $('input:radio[name="fruit"]:checked').val();
                    $('#content').html(fruit);
                });
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
        <input type="radio" name="fruit" value="Apple"/>Apple
        <input type="radio" name="fruit" value="Banana"/>Banana
        <input type="radio" name="fruit" value="Mango"/>Mango
        <input type="radio" name="fruit" value="coconut"/>Coconut
        <input type="radio" name="fruit" value="pear"/>Pear
        <input type="radio" name="fruit" value="graph"/>Graph
    </body>
</html>

Try It

Reset or unchecked all radio button

$('input:radio[name="fruit"]').attr('checked',false);

Example 3

  • When load this page, the Pear will be unchecked.
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('input:radio[name="fruit"]').attr('checked',false);
                $('input:radio[name="fruit"]').click(function(){
                    var fruit =$('input:radio[name="fruit"]:checked').val();
                    $('#content').html(fruit);
                });
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
        <input type="radio" name="fruit" value="Apple"/>Apple
        <input type="radio" name="fruit" value="Banana"/>Banana
        <input type="radio" name="fruit" value="Mango"/>Mango
        <input type="radio" name="fruit" value="coconut"/>Coconut
        <input type="radio" name="fruit" value="pear" checked="checked" />Pear
        <input type="radio" name="fruit" value="graph"/>Graph
    </body>
</html>

Try It