Solved

JQuery: Making Radio Buttons Behave as Check Boxes in IE

Posted on 2011-09-17
14
254 Views
Last Modified: 2012-06-27
Problem: due to a client's requirement, I need to make radio buttons behave like checkboxes.  That is, there is no radio button list, they are not mutually exclusive, clicking each button once selects it, clicking it the second time deselects it.

Here is a sample that is supposed to work for every element belonging to class myRadioButton.  This is the full test page.  I am running VS 2010 and jquery 1.4.1, as you can see from the sample.  
Problem: I can't check radio  buttons.  Question: how to make it work?
Thank you.

//--------------------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationTest1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .myRadioButton {}
    </style>
    <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('.myRadioButton').mousedown(function (event) {
                debugger
                event.preventDefault();

                if ($(this).attr('checked') == undefined) {
                    $(this).attr('checked', 'checked');
                    //$('input[id=' + $(this).attr('id') + ']').attr('checked', 'checked');
                }
                else {
                    $(this).removeAttr('checked');
                    //$('input[id=' + $(this).attr('id') + ']').removeAttr('checked');
                }
            });

            $('.myRadioButton').click(function (event) {
                event.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        This is a test.
    </div>
    <div class="row petsrow">
        <asp:RadioButton runat="server" class="myRadioButton" ID="RadioButton1" Text=" RadioButton1" />
    </div>
    <div>
        <asp:RadioButton runat="server" class="myRadioButton" ID="RadioButton2" Text=" RadioButton2" />
    </div>
    </form>
</body>
</html>
0
Comment
Question by:Mare22
  • 7
  • 7
14 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36554643
try :
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(":radio").each(function () {
                $("form").append("<input type='radio' name='" + $(this).attr("name") + "' style='display:none' value='0' />");
            })
            $(':radio:visible').click(function () {
                var $bro = $(":radio[name='" + $(this).attr("name") + "']").not(this);
                if ($bro.val() == "0") {
                    $bro.val("1");
                    $bro.attr("checked", false);
                }
                else {
                    $bro.val("0");
                    $bro.trigger("click");
                }
            });
        });
    </script>

Open in new window

0
 

Author Comment

by:Mare22
ID: 36554820
This works.  Thank you!  But I don't fully understand what is going on here :).  Can you please explain how your code works?  Also, the real page would require a class selector, because there will be other radio buttons that are normal.  How to combine a type/attribute and a class in a selector?

Thank you again.

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36554979
>Can you please explain how your code works?
for each radio button we create a new hidden one with the same name
> Also, the real page would require a class selector
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(":radio", ".myRadioButton").each(function () {
                $("form").append("<input type='radio' name='" + $(this).attr("name") + "' style='display:none' value='0' />");
            })
            $(":radio:visible", ".myRadioButton").click(function () {
                var $bro = $(":radio[name='" + $(this).attr("name") + "']").not(this);
                if ($bro.val() == "0") {
                    $bro.val("1");
                    $bro.attr("checked", false);
                }
                else {
                    $bro.val("0");
                    $bro.trigger("click");
                }
            });
        });
    </script>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36554983
>Can you please explain how your code works?
to unclick the clicked radio, we trigger a click on the hidden one
0
 

Author Comment

by:Mare22
ID: 36557289
leakim971, when I debug this, I don't get into the triggered click.  Why?
0
 

Author Comment

by:Mare22
ID: 36557297
leakim971, I got to say, you are genius.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36557395
put an alert("ok"); between line 6 and 7
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Mare22
ID: 36557560
the alert pops up just once per click.

One other question:  I have a couple of attributes:

<asp:RadioButton runat="server" class="myRadioButton" ID="id1" Text=" text" code="code" />

when I access them from the click function:

var txt = $(this).attr("Text");

they come as undefined.  Why?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36557564
because .net create a span and inside you have the radiobutton
the id is set to the span
0
 

Author Comment

by:Mare22
ID: 36557635
1.  How can I get the attributes?
2.  The click event is not triggered the second time - why and how does it work then?
0
 

Author Comment

by:Mare22
ID: 36557669
leakim971, many thanks!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36557692
you're welcome, have a nice week!
0
 

Author Comment

by:Mare22
ID: 36557695
leakim971, you too.

Can you please answer at least the attributes question (#1 from above)?  I really need it.  
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36557707
Server side :
       <asp:RadioButton runat="server" class="myRadioButton" ID="id1" Text=" text" code="code" />

Open in new window

In the browser :
        <span class="myRadioButton">
            <input id="MainContent_RadioButton1" type="radio" name="ctl00$MainContent$RadioButton1" value="RadioButton1">
            <label for="MainContent_RadioButton1"> RadioButton1</label>
        </span> 

Open in new window


so to read the Text "attribute", we get the content of the next label
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Sums of coloumns in html/java 15 67
Why does my button disappear? 3 28
Javascript and Jquery not firing 9 40
how to avoid redundand ajax calls 5 6
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now