Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery: Making Radio Buttons Behave as Check Boxes in IE

Posted on 2011-09-14
8
Medium Priority
?
362 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 39

Accepted Solution

by:
Pratima Pharande earned 750 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 750 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
Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

 

Author Comment

by:Mare22
ID: 36545106
mplungjan, because this is what the client wants.
0
 

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

How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

Question has a verified solution.

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

It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

670 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