• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 366
  • Last Modified:

JQuery: Making Radio Buttons Behave as Check Boxes in IE

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
Mare22
Asked:
Mare22
  • 5
  • 2
2 Solutions
 
Pratima PharandeCommented:
I think this needs to be

  if (checked === undefined) {

like

  if (checked == undefined) {

aslo try

var checked = $(this).attr('checked').val();
0
 
Michel PlungjanIT ExpertCommented:
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
 
Mare22Author Commented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Mare22Author Commented:
mplungjan, because this is what the client wants.
0
 
Mare22Author Commented:
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
 
Michel PlungjanIT ExpertCommented:
use jquery each

Do they have a name in common?
0
 
Mare22Author Commented:
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
 
Mare22Author Commented:
The working solution was provided in my next question.
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

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