Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

JQuery: Making Radio Buttons Behave as Check Boxes in IE

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
Mare22
Asked:
Mare22
  • 7
  • 7
1 Solution
 
leakim971PluritechnicianCommented:
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
 
Mare22Author Commented:
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
 
leakim971PluritechnicianCommented:
>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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
>Can you please explain how your code works?
to unclick the clicked radio, we trigger a click on the hidden one
0
 
Mare22Author Commented:
leakim971, when I debug this, I don't get into the triggered click.  Why?
0
 
Mare22Author Commented:
leakim971, I got to say, you are genius.
0
 
leakim971PluritechnicianCommented:
put an alert("ok"); between line 6 and 7
0
 
Mare22Author Commented:
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
 
leakim971PluritechnicianCommented:
because .net create a span and inside you have the radiobutton
the id is set to the span
0
 
Mare22Author Commented:
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
 
Mare22Author Commented:
leakim971, many thanks!
0
 
leakim971PluritechnicianCommented:
you're welcome, have a nice week!
0
 
Mare22Author Commented:
leakim971, you too.

Can you please answer at least the attributes question (#1 from above)?  I really need it.  
0
 
leakim971PluritechnicianCommented:
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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now