Solved

JQuery: Making Radio Buttons Behave as Check Boxes in IE

Posted on 2011-09-14
8
340 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Foreword In the years since this article was written, numerous hacking attacks have targeted password-protected web sites.  The storage of client passwords has become a subject of much discussion, some of it useful and some of it misguided.  Of cou…
Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
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)

757 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

17 Experts available now in Live!

Get 1:1 Help Now