Solved

JQuery: Making Radio Buttons Behave as Check Boxes in IE

Posted on 2011-09-14
8
342 Views
Last Modified: 2012-05-12
I have a set of independent radio buttons on a page.  
Each has an OnClick event that raises the following function:

function RadioButtonChanged() {
        //debugger
        var checked = $(this).attr('checked');
        if (checked === undefined) {
              checked = false;
        }

        $(this).attr('checked', !checked);
        //var checked1 = $(this).attr('checked');
}

The purpose of the function is to make radio button behave as a check box.  That is, every click would change its checked value.  If it was unchecked, it checks it, if it was checked, it unchecks it.

The 'checked' attribute seems to be changed as expected.  However, once a button is checked, it stays that way with subsequent clicks, even when the 'checked' attribute set to false.

What's wrong?  Please help.
 
0
Comment
Question by:Mare22
  • 5
  • 2
8 Comments
 
LVL 39

Accepted Solution

by:
Pratima Pharande earned 250 total points
ID: 36540986
I think this needs to be

  if (checked === undefined) {

like

  if (checked == undefined) {

aslo try

var checked = $(this).attr('checked').val();
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 36541014
Would you please tell us why you would change this behaviour from what everybody expects instead of simply use checkboxes?

Plain JS:

function RadioButtonChanged() {
  var checked = this.checked
  if (checked === undefined) {
    checked = false;
  }
  this.checked = !checked
}

or JS 1.6+

function RadioButtonChanged() {
  var checked = $(this).prop("checked");
  if (checked === undefined) {
    checked = false;
  }
  $(this).prop("checked",!checked);
}


Lastly you can uncheck it using

  $(this).removeAttr("checked");
0
 

Author Comment

by:Mare22
ID: 36545098
Guys, the code is working as expected as is.  I can see it through the debugger.  The problem seems to be that the default radio button behavior is still in place - that is why the button keeps looking as if it is checked even when the check attribute is false.  How do I disable/override the default radio button behavior?
0
 

Author Comment

by:Mare22
ID: 36545106
mplungjan, because this is what the client wants.
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

Author Comment

by:Mare22
ID: 36545167
This works:

$(document).ready(function () {        
          // Akita button
          var akitaButton = '#<%=rbAkita.ClientID%>';

          var akitaChecked = $(akitaButton).val();
          if (akitaChecked === undefined) {
              akitaChecked = false;
          }

          $(akitaButton).click(function () {
              $(akitaButton).attr('checked', !akitaChecked);
              akitaChecked = !akitaChecked;
          });

});

The problem is - I don't want to do it for every radio button on the page; there are just too many of them.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36545851
use jquery each

Do they have a name in common?
0
 

Author Comment

by:Mare22
ID: 36554171
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?

//--------------------------------------------------------------------------------------
<%@ 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
 

Author Closing Comment

by:Mare22
ID: 36571720
The working solution was provided in my next question.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

863 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

20 Experts available now in Live!

Get 1:1 Help Now