Solved

Radio Buttons (jquery)

Posted on 2014-07-30
18
359 Views
Last Modified: 2014-07-30
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
0
Comment
Question by:Dinesh Kumar
  • 6
  • 5
  • 4
  • +1
18 Comments
 
LVL 13

Accepted Solution

by:
duncanb7 earned 250 total points
ID: 40229121
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
 
LVL 58

Expert Comment

by:Gary
ID: 40229132
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40229139
Unlike checkboxes, radio buttons are mutually exclusive by design.
http://www.utexas.edu/learn/forms/radio.html

Is there more to this question?
0
 

Author Comment

by:Dinesh Kumar
ID: 40229219
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
 

Author Comment

by:Dinesh Kumar
ID: 40229221
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40229231
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
 
LVL 13

Expert Comment

by:duncanb7
ID: 40229235
Try this

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

    });

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40229240
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
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 100 total points
ID: 40229276
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:Dinesh Kumar
ID: 40229289
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 150 total points
ID: 40229298
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40229342
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40229361
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
 

Author Closing Comment

by:Dinesh Kumar
ID: 40229464
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
 
LVL 13

Expert Comment

by:duncanb7
ID: 40229478
Thx for your pt

Have a nice day

Duncan
0
 

Author Comment

by:Dinesh Kumar
ID: 40229492
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
 
LVL 13

Expert Comment

by:duncanb7
ID: 40229499
Please write it in detail first that will assist other experts to easier or speed up answer your issue

Duncan
0
 

Author Comment

by:Dinesh Kumar
ID: 40229518
Given some more inputs.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now