Table td click event using jQuery

jQuery

$(document).ready(function () {

            $("#mytable td").click(function () {
                alert($(this).html());
                alert($(this).attr('class'));               
            });           

        });

HTML:

<table id="mytable" style="width: 100%;">

        <tr>
            <td class="s">Row11</td>
            <td>Row12</td>
            <td>Row13</td>
        </tr>
        <tr>
            <td>Row21</td>
            <td>Row22</td>
            <td>Row23</td>
        </tr>
        <tr>
            <td>Row31</td>
            <td>Row32</td>
            <td>Row33</td>
        </tr>
    </table>

document.getElementByClassName - Cross Browser Fix

 
var getElementsByClassName = function (className, tag, elm){
 if (document.getElementsByClassName) {
  getElementsByClassName = function (className, tag, elm) {
   elm = elm || document;
   var elements = elm.getElementsByClassName(className),
    nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
    returnElements = [],
    current;
   for(var i=0, il=elements.length; i<il; i+=1){
    current = elements[i];
    if(!nodeName || nodeName.test(current.nodeName)) {
     returnElements.push(current);
    }
   }
   return returnElements;
  };
 }
 else if (document.evaluate) {
  getElementsByClassName = function (className, tag, elm) {
   tag = tag || "*";
   elm = elm || document;
   var classes = className.split(" "),
    classesToCheck = "",
    xhtmlNamespace = "http://www.w3.org/1999/xhtml",
    namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
    returnElements = [],
    elements,
    node;
   for(var j=0, jl=classes.length; j<jl; j+=1){
    classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
   }
   try {
    elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
   }
   catch (e) {
    elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
   }
   while ((node = elements.iterateNext())) {
    returnElements.push(node);
   }
   return returnElements;
  };
 }
 else {
  getElementsByClassName = function (className, tag, elm) {
   tag = tag || "*";
   elm = elm || document;
   var classes = className.split(" "),
    classesToCheck = [],
    elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
    current,
    returnElements = [],
    match;
   for(var k=0, kl=classes.length; k<kl; k+=1){
    classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
   }
   for(var l=0, ll=elements.length; l<ll; l+=1){
    current = elements[l];
    match = false;
    for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
     match = classesToCheck[m].test(current.className);
     if (!match) {
      break;
     }
    }
    if (match) {
     returnElements.push(current);
    }
   }
   return returnElements;
  };
 }
 return getElementsByClassName(className, tag, elm);
};

Note:

We have created a global function called getElementsByClassName, not a method on the document object.

We need to call getElementsByClassName or window.getElementsByClassName, not document.getElementsByClassName.

Reference: http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

JQuery Radiobutton Validation

Jquery Radiobutton Validation:

<asp:RadioButton Text="Male" value="M" ID="rbM" runat="server" GroupName="g"/>

<asp:RadioButton Text="Female" value="F" ID="rbF" runat="server" GroupName="g" />

<asp:Button Text="Submit" runat="server" ID="btn" />

JQUERY

$(document).ready(function () {

   $("#<%=btn.ClientID%>").click(function () {

if ($("input[id='rbM']").is(":checked") == false &&        $("input[id='rbF']").is(":checked") == false){

alert("Please select an option!");

}

           

});

});

Getting Text and Value

$(document).ready(function () {

            $("#<%=btn.ClientID%>").click(function () {

                if ($("input[id='rbM']").is(":checked") == true) {

                    alert("Text: " + $("input[id='rbM']").next().text());

                    alert("Value: " + $("input[id='rbM']").val());

                }

                else if ($("input[id='rbF']").is(":checked") == true) {

                    alert("Text: " + $("input[id='rbF']").next().text());

                    alert("Value: " + $("input[id='rbF']").val());

                }

                else {

                    alert("Please select an option!");

                }

            });

        });

       

JQuery validation for asp.net radiobuttonlist

 RadiobuttonList:

<asp:RadioButtonList runat="server" ID="Intent">

        <asp:ListItem Value="Confirm">Yes!</asp:ListItem>

        <asp:ListItem Value="Postpone">Not now</asp:ListItem>

        <asp:ListItem Value="Decline">Never!</asp:ListItem>

    </asp:RadioButtonList>

 JQuery:

$(document).ready(function () {

            $("#<%=btn.ClientID%>").click(function () {

                var $rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked");

                if ($rbvalue.length > 0) {

                    alert("Text: " + $rbvalue.next().text());

                    alert("Value: " + $rbvalue.val());

                }

                else {

                    alert("Please select an option!");

                }

            });

        });

Another way:

 JQuery:

$(document).ready(function () {

            var ischecked = false;

            $("#<%=btn.ClientID%>").click(function () {

                $("input[name='<%=Intent.UniqueID%>']").each(function () {

                    if (this.checked) {

                        ischecked = true;

                    }

                });

                if (ischecked) {

                    var $rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked");

                    alert("Text: " + $rbvalue.next().text());

                    alert("Value: " + $rbvalue.val());

                }

                else {

                    alert("Please select an Option!");

                }

            });

        });

Radiobutton onclick:

$('input:radio').click(function () {

            //        alert($('input:radio:checked + label').text());

            alert("Value: " + $(this).val());

            alert("Text: " + $(this).next().text());

        });