Radio Buttons (jquery)

I want to deselect all radion button except the current selected one

This is the code I am trying:

 <script type="text/javascript">
     function handle(myRadio) {      
         $(this).checked = "checked";        
         $("#abc :radio").each(function () {
             if (document.getElementById('myRadios').checked != "checked") {
                 $("#abc").find('input[type=radio]').not(this).prop('checked', false);
             }
         });      
     }
 </script>
    <div id="abc">
    <br /><br />
    <input id="myRadios" type="radio" onclick="handle(this);"/>
    <input id="myRadios" type="radio" onclick="handle(this);"/>
    <input id="myRadios" type="radio" onclick="handle(this);"/>
    <input id="myRadios" type="radio" onclick="handle(this);"/>
        </div>

 Thanks
Dinesh
Dinesh KumarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

duncanb7Commented:
Dear Author,

-use your jquery library path and  replace the one in the code
-use class for "myRadios" instead of id
-try this code for example only

Duncan

<html>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<head>
<title>Title</title>
<style>
</style>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

});
</script>
<script type="text/javascript">

     function handle(myRadio) {  
console.log("testing");	 
  // $('input[name=radioName]:checked').attr('checked', false);
   $('.myRadios').removeAttr('checked');
   $(myRadio).attr('checked', true);
     }
 
    

</script>
</head>
<body  >
<div id="abc">
    <br /><br />
    <input class="myRadios"  type="radio" onclick="handle(this);"/>
    <input class="myRadios"  type="radio" onclick="handle(this);"/>
    <input class="myRadios"  type="radio" onclick="handle(this);"/>
    <input class="myRadios"  type="radio" onclick="handle(this);"/>
       
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
Just give the radio buttons the same name then they will unselect by default - no need for javascript
This is how you are supposed to use radio buttons.

http://jsfiddle.net/GaryC123/467Lp/
0
Ray PaseurCommented:
Unlike checkboxes, radio buttons are mutually exclusive by design.
http://www.utexas.edu/learn/forms/radio.html

Is there more to this question?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Dinesh KumarAuthor Commented:
I am looking either in jquery or javascript, I want take some action when particular radio button is selected.

so looking for code which tells me which radio button is selected.
0
Dinesh KumarAuthor Commented:
Current code is: <script type="text/javascript">  
   
     $(document).ready(function () {
         $(".myRadios").bind("click", function () {
             $("#abc").find('input[type=radio]').not($(this)).prop('checked', false);

             
         });

    });



 </script>
    <div id="abc">
    <br /><br />
    <input class="myRadios" name="abc1" id="abc1" type="radio" value="1" />
    <input class="myRadios" name="abc1" id="abc1" type="radio" value="2" />
    <input class="myRadios" name="abc1" id="abc1" type="radio"  value="3"/>
    <input class="myRadios" name="abc1" id="abc1"type="radio" value="4" />
        </div>
0
Ray PaseurCommented:
There can only be one id= attribute of a given name.  With multiple id="abc1" input controls, the document may confuse the browser and so this probably will not work properly.
0
duncanb7Commented:
Try this

Duncan
$(document).ready(function () {
         $(".myRadios").bind("click", function () {
            
 $('.myRadios').removeAttr('checked');
   $(this).attr('checked', true);
             
         });

    });

Open in new window

0
GaryCommented:
Good catch by Ray
Don't know why everyone is insisting on using js to do what a radio group does naturally.
Well you have nothing in your radio buttons to identify anything, if you give them a value.

http://jsfiddle.net/GaryC123/467Lp/2/
0
Ray PaseurCommented:
See if this makes sense for your needs.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function (){
    $(".myRadios").change(function(){
        var radioValue = $(this).val();
        alert('Radio: ' + radioValue);
    });
});
</script>

<title>HTML5 Page With Radio Buttons</title>
</head>
<body>

<div id="abc">
    <input class="myRadios" name="abc1" id="radio1" type="radio" value="1" />
    <input class="myRadios" name="abc1" id="radio2" type="radio" value="2" />
    <input class="myRadios" name="abc1" id="radio3" type="radio" value="3" />
    <input class="myRadios" name="abc1" id="radio4" type="radio" value="4" />
</div>

</body>
</html>

Open in new window

0
Dinesh KumarAuthor Commented:
Hi Ray, I am sorry but if you can give look on the following:


   
<script type="text/javascript">

        $(document).ready(function () {
            $(".myRadios").bind("click", function () {

                alert($(this).val());
                //alert($(this).find("td").eq(1).html());
                //alert($(this).find("td").eq(2).html());
                alert($(this).next("td").html());// THIS IS NOT WORKING
            });

        });



    </script>
    <div id="abc">
        <br />
        <br />
        <table id="tbl">
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="1" /></td>
                <td>11</td>
            </tr>
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="2" /></td>
                <td>22</td>
            </tr>
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="3" /></td>
                <td>33</td>
            </tr>
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="4" /></td>
                <td>44</td>
            </tr>
        </table>
    </div>

Open in new window

0
GaryCommented:
So the problem is nothing to do with your original code

Replace
alert($(this).next("td").html());

with
alert($(this).closest("td").next("td").html());//

http://jsfiddle.net/GaryC123/467Lp/3/
0
Ray PaseurCommented:
Going forward, please use the Code snippet feature when you post code here at E-E.  It gives us line numbers and a unispace font that makes things easier to read and discuss.  Just click the word Code in the line of formatting controls and paste your code between the tags.
0
Ray PaseurCommented:
I think the original question was answered, so I'll sign off now.  To clarify the following elements of the <input> control...

type= tells the browser what kind of control to render.
name= tells the browser what name to apply to the value in the resulting request (when the form is submitted)
class= gives the name of a non-unique selector for use with CSS style or other actions
id= gives the name of a unique selector for use with CSS style or other actions

When the request is sent (form is submitted) any unfired radio button or unchecked checkbox is absent from the request.  This differs from inputs of type="text" where the input control is present in the request, but with an empty value.  As a result it's important for the action script to know what possible names and values might be expected.
0
Dinesh KumarAuthor Commented:
using class with radio button worked otherwise I kept trying # instead of . in jquery and of no use.

Thanks everyone who helped me in reaching out solution.

Finally the solution is:


    <script type="text/javascript">

        $(document).ready(function () {
            $(".myRadios").bind("click", function () {          

                alert($(this).val());
         
                alert($(this).closest("td").next("td").html());
                alert($(this).closest("td").next("td").next("td").html());
            });

            $(".btncss").bind("click", function () {

            });
        });

    </script>
    <div id="abc">
        <br />
        <br />
        <table id="tbl">
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="1" /></td>
                <td>11</td>
                <%--<td>22</td>--%>
            </tr>
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="2" /></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="3" /></td>
                <td>33</td>
                <td>44</td>
            </tr>
            <tr>
                <td>
                    <input class="myRadios" name="abc1" id="abc1" type="radio" value="4" /></td>
                <td>44</td>
                <td>55</td>
            </tr>
        </table>
        <input id="Button1" type="button" value="button" class="btncss" />
    </div>


I will put another question for getting it done on button click  now after some tries from my side if not worked.

    $(".btncss").bind("click", function () {

            });
0
duncanb7Commented:
Thx for your pt

Have a nice day

Duncan
0
Dinesh KumarAuthor Commented:
Hi Experts, I am on some deadline, if you can also help on following:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28486990.html
0
duncanb7Commented:
Please write it in detail first that will assist other experts to easier or speed up answer your issue

Duncan
0
Dinesh KumarAuthor Commented:
Given some more inputs.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.