Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    41
    Thanks
    14
    Thanked 0 Times in 0 Posts

    How to switch radio button from Javascript (or CSS?) ?

    Assume I have the following HTML code snippet:

    Code:
    <div>
        <div class="printLabel"><input type="radio" checked="" value="0" name="printAll" id="uzbtjyi_0"><label for="uzbtjyi_0" class="point">Current page</label></div>
         <div class="printLabel"><input type="radio" value="1" name="printAll" id="2x2yll7_1"><label for="2x2yll7_1" class="point">All pages</label></div>
    </div>
    When I load the web page the first radio button is enabled by default.

    How can I with Javascript (!) command switch to the second radio button?

    Peter

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by pstein View Post
    How can I with Javascript (!) command switch to the second radio button?
    Code:
    <input type = "radio" checked name = "printAll" id="uzbtjyi_0">
    <input type = "radio" name = "printAll" id="2x2yll7_1">
    
    <script type = "text/javascript">
    document.getElementById("2x2yll7_1").checked = true;
    </script>
    Note: it is not legal to start an id with a number in older browsers. The HTML 4.01 spec states that ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). This restriction does not apply to HTML5, but of course there are still many people using Windows XP and HTML4.

    You could overcome this by placing your HTML in a form and then addressing the radio button by name. In any case all input elements should be contained within a form, without which they will not be submitted to the server.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-15-2014 at 12:26 PM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    pstein (07-06-2014)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    41
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Ok, thank you.

    However I would prefer a solution which is independent from id labels but use a value assigment.
    As you can see it my initial post the first radio button has a value of 0 while the second radio gets a value of 1

    Is there a javascript construction similar to

    document.getname("printAll").assignValue(1);

    Peter

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Not to my knowledge.

    If your radio buttons are contained within a form you could do

    Code:
    <form>
    <input type = "radio" checked name = "printAll" id="uzbtjyi_0">
    <input type = "radio" name = "printAll" id="2x2yll7_1">
    </form>
    
    <script type = "text/javascript">
    
    document.forms[0].printAll[1].checked = true;  // the equivalent of clicking on the radio
    
    </script>
    But as I say in a form you could address the buttons by name. The names have no meaning unless they are in a form.
    Last edited by Philip M; 06-18-2014 at 09:39 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    pstein (07-06-2014)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    How can I with Javascript (!) command switch to the second radio button?
    Why don't you just change the attribute checked from the first radio element to the second one?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by abduraooft View Post
    Why don't you just change the attribute checked from the first radio element to the second one?
    I am assuming that for some reason he cannot alter the HTML. He asked "How can I with Javascript (!) command switch to the second radio button?"


    Here is another way:-

    Code:
    <input type = "radio" checked name = "printAll" id="uzbtjyi_0" value = 0>
    <input type = "radio" name = "printAll" id="2x2yll7_1" value = 1>
    
    <script type = "text/javascript">
    
    document.getElementsByName("printAll")[1].checked=true;
    
    </script>
    Last edited by Philip M; 06-18-2014 at 10:28 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    pstein (07-06-2014)

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Here is a solution that does not rely on the order of the radio buttons but on its value.

    Code:
    document.querySelector('.printLabel input[value="1"]').checked = true;
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    pstein (07-06-2014)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •