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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
duncanb7Connect With a Mentor Commented:
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
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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 PaseurConnect With a Mentor Commented:
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
 
GaryConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.