Jquery Events with Examples

@
{
    Layout = null;
}
< !DOCTYPE html >
    < html >
    < head >
    < meta name = "viewport"content = "width=device-width" / >
    < title > ButtonEvent < /title> <
    script src =
    "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >
    < /script> < script type =
    "text/javascript" >
    $(document).ready(function()
    {
        var t1 = $('#txtuname').val();
        var t2 = $('#txtpass').val();
        $('#bttn1').click(function()
        {
            alert("You entered p1!" + t1 + t2);
        });
        $('#bttn2').click(function()
        {
            $("input:text").val("");
            $("select").val(3);
        });
        $("button").click(function()
        {
            var favorite = [];
            $.each($(
                    "input[name='sport']:checked"),
                function()
                {
                    favorite.push($(this).val());
                });
            alert("My favourite sports are: " +
                favorite.join(", "));
        });
        $('#buttoption').click(function()
        {
            var radioValue = $(
                    "input[name='gender']:checked")
                .val();
            if (radioValue)
            {
                alert("Your are a - " +
                    radioValue);
            }
        });
    });

</script>
</head>

<body>
    <div>
        <table border="1">
            <tr>
                <td><label>Enter Uname</label></td>
                <td><input type="text" id="txtuname" value="hemlata"
                    /></td>
            </tr>
            <tr>
                <td><label>Enter Password</label></td>
                <td><input type="text" id="txtpass" value="password"
                    /></td>
            </tr>
            <tr>
                <td><input type="button" value="RESET" id="bttn1"
                    /></td>
                <td><input type="button" value="SUBMIT" id="bttn2"
                    /></td>
            </tr>
            <tr>
                <td>
                    <select id="converted_dropdown_1">
                        <option value="0">oooooo</option>
                        <option value="1">oranges</option>
                        <option value="2">bananas</option>
                        <option value="3">strawberries</option>
                        <option value="4">raspberries</option>
                        <option value="5">melons</option>
                        <option value="6">grapes</option>
                        <option value="7">tangerines</option>
                    </select>
                </td>
                <td>
                    <select id="converted_dropdown_2">
                        <option value="0">zzzzzz</option>
                        <option value="1">oranges</option>
                        <option value="2">bananas</option>
                        <option value="3">strawberries</option>
                        <option value="4">raspberries</option>
                        <option value="5">melons</option>
                        <option value="6">grapes</option>
                        <option value="7">tangerines</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        <h3>Select your favorite sports:</h3>
                        <label><input type="checkbox" value="football" name="sport"> Football</label>
                        <label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
                        <label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
                        <label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
                        <label><input type="checkbox" value="racing" name="sport"> Racing</label>
                        <label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
                        <br>
                        <button type="button">Get Values</button>
                    </form>
                </td>
            </tr>
            <tr>
                <td>
                    <label><input type="radio" name="gender" value="True">True</label>
                    <label><input type="radio" name="gender" value="False">False</label>
                    <br />
                    <input type="button" id="buttoption" value="option"
                    />
                </td>
            </tr>
        </table>
    </div>
</body>

</html>