Prasad Bolla's SharePoint Blog

Click Here to go through the Interesting posts within my Blog.

Click Here to go through the new posts in my blog.

Thursday, December 06, 2012

How to bind Javascript function for Radio Button Event and hide and show the required rows based on value in h3 tag using JQuery


Note:- 
Here Show1 and Hide1 are the backend original column names given. Even if you change the Show1 to Show2 it will work as still your original backend database name is Show1.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    //Yes Radio Button
    //Place Your Yes Radio Button ID after #
    $("#ctl00_m_g_a7e4241a_e123_414f_95ec_aed906bb7cf1_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00").click(function(event)
    {
        //YesRadio() Function will occur when you click Yes Radio Button.
         YesRadio();
        $('h3:contains("Show")').closest('tr').hide();
        $('h3:contains("Hide1")').closest('tr').show();
    });
   
    //No Radio Button
    //Place Your No Radio Button ID after #
    $("#ctl00_m_g_a7e4241a_e123_414f_95ec_aed906bb7cf1_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01").click(function(event)
    {
        //NoRadio() Function will occur when you click No Radio Button.
        NoRadio();
        $('h3:contains("Hide1")').closest('tr').hide();
        $('h3:contains("Show")').closest('tr').show();
    });
   
});
function YesRadio()
{
    alert('Radio button Yes was clicked');
    //$("#onetIDListForm tr:eq(5)").hide();

}
function NoRadio()
{
    alert('Radio button No was clicked');
}
</script>

No comments:

Post a Comment