Mare22
asked on
JQuery: Making Radio Buttons Behave as Check Boxes in IE
Problem: due to a client's requirement, I need to make radio buttons behave like checkboxes. That is, there is no radio button list, they are not mutually exclusive, clicking each button once selects it, clicking it the second time deselects it.
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?
Thank you.
//------------------------ ---------- ---------- ---------- ---------- ---------- ---------- --
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c s" Inherits="WebApplicationTe st1._Defau lt" %>
<!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"></s cript>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.myRadioButton').moused own(functi on (event) {
debugger
event.preventDefault();
if ($(this).attr('checked') == undefined) {
$(this).attr('checked', 'checked');
//$('input[id=' + $(this).attr('id') + ']').attr('checked', 'checked');
}
else {
$(this).removeAttr('checke d');
//$('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>
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?
Thank you.
//------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c
<!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.
<script type="text/javascript" language="javascript">
$(document).ready(function
$('.myRadioButton').moused
debugger
event.preventDefault();
if ($(this).attr('checked') == undefined) {
$(this).attr('checked', 'checked');
//$('input[id=' + $(this).attr('id') + ']').attr('checked', 'checked');
}
else {
$(this).removeAttr('checke
//$('input[id=' + $(this).attr('id') + ']').removeAttr('checked')
}
});
$('.myRadioButton').click(
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>Can you please explain how your code works?
for each radio button we create a new hidden one with the same name
> Also, the real page would require a class selector
for each radio button we create a new hidden one with the same name
> Also, the real page would require a class selector
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(":radio", ".myRadioButton").each(function () {
$("form").append("<input type='radio' name='" + $(this).attr("name") + "' style='display:none' value='0' />");
})
$(":radio:visible", ".myRadioButton").click(function () {
var $bro = $(":radio[name='" + $(this).attr("name") + "']").not(this);
if ($bro.val() == "0") {
$bro.val("1");
$bro.attr("checked", false);
}
else {
$bro.val("0");
$bro.trigger("click");
}
});
});
</script>
>Can you please explain how your code works?
to unclick the clicked radio, we trigger a click on the hidden one
to unclick the clicked radio, we trigger a click on the hidden one
ASKER
leakim971, when I debug this, I don't get into the triggered click. Why?
ASKER
leakim971, I got to say, you are genius.
put an alert("ok"); between line 6 and 7
ASKER
the alert pops up just once per click.
One other question: I have a couple of attributes:
<asp:RadioButton runat="server" class="myRadioButton" ID="id1" Text=" text" code="code" />
when I access them from the click function:
var txt = $(this).attr("Text");
they come as undefined. Why?
One other question: I have a couple of attributes:
<asp:RadioButton runat="server" class="myRadioButton" ID="id1" Text=" text" code="code" />
when I access them from the click function:
var txt = $(this).attr("Text");
they come as undefined. Why?
because .net create a span and inside you have the radiobutton
the id is set to the span
the id is set to the span
ASKER
1. How can I get the attributes?
2. The click event is not triggered the second time - why and how does it work then?
2. The click event is not triggered the second time - why and how does it work then?
ASKER
leakim971, many thanks!
you're welcome, have a nice week!
ASKER
leakim971, you too.
Can you please answer at least the attributes question (#1 from above)? I really need it.
Can you please answer at least the attributes question (#1 from above)? I really need it.
Server side :
so to read the Text "attribute", we get the content of the next label
<asp:RadioButton runat="server" class="myRadioButton" ID="id1" Text=" text" code="code" />
In the browser : <span class="myRadioButton">
<input id="MainContent_RadioButton1" type="radio" name="ctl00$MainContent$RadioButton1" value="RadioButton1">
<label for="MainContent_RadioButton1"> RadioButton1</label>
</span>
so to read the Text "attribute", we get the content of the next label
ASKER
Thank you again.