JQuery Forms Checkbox or Radio Buttons Automatically

From CoderLearner
Jump to: navigation, search

Description

You have a series of radio buttons or checkbox. The last option is label as the "Other" and it has the input field associated with it. When you decided to enter the input field, the label "Other" option should also selected by default.

Example 1

  • Work with Radio Button
<!DOCTYPE html>
<html>
    <head>
        <title>Handle Radio</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $().ready(function() {
                var $o_chk = $('#skillselected input:text');
                $o_chk.blur(function() {
                    if ($(this).val() != '') {
                        $(this).siblings('input:radio').attr('checked', true);
                    }
                });
            });
        </script>
        <style>
            ul {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <h3>Skill</h3>
        <ul id="skillselected">
            <li>
                <input name="skill" id="skill1" type="radio" value="C++"/>
                <label for="skill1">C++</label>
            </li>
            <li>
                <input name="skill" id="skill2" type="radio" value="Java"/>
                <label for="skill2">Java</label>
            </li>
            <li>
                <input name="skill" id="skill3" type="radio" value="C#"/>
                <label for="skill3">C#</label>
            </li>
            <li>
                <input name="skill" id="skill4" type="radio" value="Other"/>
                <label for="skill4">Other</label>
                <input type="text" name="other_skill4" id="other_skill4"/>
            </li>
        </ul>
    </body>
</html>

Example 2

Work with checkbox.

<!DOCTYPE html>
<html>
    <head>
        <title>Handle Radio</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $().ready(function() {
                var $o_chk = $('#skillselected input:text');

                $o_chk.blur(function() {
                    if ($(this).val() != '') {
                        $(this).siblings('input:checkbox').attr('checked', true);
                    }
                });
            });
        </script>
        <style>
            ul {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <h3>Skill</h3>
        <ul id="skillselected">
            <li>
                <input name="skill" id="skill1" type="checkbox" value="C++"/>
                <label for="skill1">C++</label>
            </li>
            <li>
                <input name="skill" id="skill2" type="checkbox" value="Java"/>
                <label for="skill2">Java</label>
            </li>
            <li>
                <input name="skill" id="skill3" type="checkbox" value="C#"/>
                <label for="skill3">C#</label>
            </li>
            <li>
                <input name="skill" id="skill4" type="checkbox" value="Other"/>
                <label for="skill4">Other</label>
                <input type="text" name="other_skill4" id="other_skill4"/>
            </li>
        </ul>
    </body>
</html>