-->

Monday, July 7, 2014

How to check RadioButton or CheckBox is checked or not using JQuery

How to check RadioButton or CheckBox is checked or not using JQuery

Welcome to JQuery, using ID property of HTML element you can get attribute of element in JQuery. If you want to get any element in JQuery, Should create a function in <Script> </Script> block, now your code look like.

<script type="text/javaScript">
$(function( ) { } );
</Script>

Now, if you want to handle function on button_click event then you must retrieve button_id using '#' after that you will handle any event on it like click. Today we will learn , how to check status of control like checked or not, first to get id of that control. Also check it using this function

is(':checked')


Note :  Must add     <script src="Scripts/jquery-1.10.2.js"></script> in your head section of page . I have visual studio 2013 so i use 1.10.2. You can also use 1.8.2.js file 

Now your complete code is 


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery radiobutton and checkbox status check</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $('#bt').click(function () {

                var rdchk = $('#Radio1').is(':Checked');
                var ckchk = $('#Checkbox1').is(':Checked');
                alert("radio button status "+rdchk+" check box status "+ckchk);


            })


        });


    </script>
    <style type="text/css">
        #Radio1 {
            height: 32px;
            width: 174px;
            color :black;
        }
        #Checkbox1 {
            height: 69px;
            width: 83px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <input id="Radio1" type="radio" value="Gender" /></div>
        <input id="Checkbox1" type="checkbox" /><br />
    <button id="bt">Check Staus</button>
    </form>
   
        
</body>
</html>

Code generate the following code

How to check RadioButton or CheckBox is checked or not using JQuery

Read other related articles

Also read other articles

© Copyright 2013 Computer Programming | All Right Reserved