Solved

JQuery: Making Radio Buttons Behave as Check Boxes in IE

Posted on 2011-09-14
8
360 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 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
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 

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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

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 …
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
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)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

630 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