SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Angry Coder's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "All Yes" "All No" -- Radio button question

    Hello,

    I have a form with many yes/no radio button, how can I offer "All Yes" "All No" feature?

    Please help.
    Why It Doesn't Work?!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use the getElementsByTagName method, but it depends how far you want to go.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function setAll(val) {
                    var parent = document.getElementById('test');
                    var chks = parent.getElementsByTagName('input');
                    for(var i = 0; i < chks.length; i++) {
                        if(chks[i].type == 'checkbox')
                            chks[i].checked = val;
                    }
                }
            </script>
        </head>
        <body>
    
            <div id="test">
                <p>Within Div</p>
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />        
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
                <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            </div>
    
            <p>Outside Div</div>
            <br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <label for="1">Label: </label><input type="checkbox" id="1" value="1" /><br />
            <br />
            <input type="button" id="2" value="All Yes" onclick="setAll(true);" />
            <input type="button" id="2" value="All Yes" onclick="setAll(false);" />
    
        </body>
    </html>


  3. #3
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
      <meta content="text/html; charset=UTF-8" http-equiv="content-type">
      <title></title>
    
    
      <script type="text/javascript">
    function check(bu){
    var el, i = 0;
    while(el = document.getElementById(bu+(i++))) { 
    el.checked = true; 
    }
    }
    </script>
    <style type="text/css">
    .AngryCoder { width:70px; background-color:blue; color:white; border:1px solid orange;}
    </style>
    </head>
    
    <body>
    
    <form>
      <label for="y0"><input name="rad0" id="y0" type="radio">Yes</label>
      <label for="n0"><input name="rad0" id="n0" type="radio">No</label><br>
    
      <label for="y1"><input name="rad1" id="y1" type="radio">Yes</label>
      <label for="n1"><input name="rad1" id="n1" type="radio">No</label><br>
    
      <label for="y2"><input name="rad2" id="y2" type="radio">Yes</label>
      <label for="n2"><input name="rad2" id="n2" type="radio">No</label><br>
    
      <label for="y3"><input name="rad3" id="y3" type="radio">Yes</label>
      <label for="n3"><input name="rad3" id="n3" type="radio">No</label><br><br>
    
      <label for="y4"><input value="all yes" onclick="check('y')" type="button" class="AngryCoder">
      <label for="n4"><input value="all no" onclick="check('n')" type="button" class="AngryCoder">
    
    </form>
    
    <br>
    
    </body>
    </html>
    Last edited by muazzez; Aug 2, 2007 at 07:11.
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  4. #4
    SitePoint Guru Angry Coder's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks can you please tell me why my code is not working?

    HTML Code:
    <script type="text/javascript">
    <!--
    function js_check_all_option(formobj, option)
    {
        for (var i =0; i < formobj.elements.length; i++)
        {
            var elm = formobj.elements[i];
            
            if (elm.type == 'radio')
            {
                elm.checked = option;
                alert(elm.name);
            }
        }
    }
    //-->
    </script>
    
    <form action="x" method="post" name="cpform" id="cpform">
    
    <table cellpadding="4" cellspacing="0" border="0" align="center" width="90&#37;" class="tborder">
    
    <tr valign="top">
    
        <td class="thead">Name</td>
        <td class="thead"><input type="button" class="button" value=" All Yes " onclick="check('y')" /> <input type="button" class="button" value=" All No " onclick="check('n')" /></td>
    </tr><tr valign="top">
        <td class="alt1">z1</td>
        <td class="alt1"><div id="ctrl_table[z1]" class="smallfont" style="white-space:nowrap">
            <label for="rb_1_table[z1]_1"><input type="radio" name="table[z1]" id="rb_1_table[z1]_1" value="1" tabindex="1" checked="checked" />Yes</label>
            <label for="rb_0_table[z1]_1"><input type="radio" name="table[z1]" id="rb_0_table[z1]_1" value="0" tabindex="1" />No</label>
    
        </div></td>
    </tr><tr valign="top">
        <td class="alt1">z2</td>
        <td class="alt1"><div id="ctrl_table[z2]" class="smallfont" style="white-space:nowrap">
            <label for="rb_1_table[z2]_2"><input type="radio" name="table[z2]" id="rb_1_table[z2]_2" value="1" tabindex="1" checked="checked" />Yes</label>
            <label for="rb_0_table[z2]_2"><input type="radio" name="table[z2]" id="rb_0_table[z2]_2" value="0" tabindex="1" />No</label>
        </div></td>
    </tr><tr>
    
    
    </tr>
    </table>
    </form>
    Why It Doesn't Work?!

  5. #5
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    function check(num)
    {
    var arr = [
    ["rb_1_table[z1]_1","rb_1_table[z2]_2"],
    ["rb_0_table[z1]_1","rb_0_table[z2]_2"]
    ];
    var el, i = 0;
    while( el = document.getElementById(arr[num][i++]) ) {
    		    el.checked = true;
                alert(el.getAttribute("name"));
            
        }
    }
    </script>
    
    <form action="x" method="post" name="cpform" id="cpform">
    
    <table cellpadding="4" cellspacing="0" border="0" align="center" width="90&#37;" class="tborder">
    
    <tr valign="top">
    
        <td class="thead">Name</td>
        <td class="thead"><input type="button" class="button" value=" All Yes " onclick="check(0)" /> <input type="button" class="button" value=" All No " onclick="check(1)" /></td>
    </tr><tr valign="top">
        <td class="alt1">z1</td>
        <td class="alt1"><div id="ctrl_table[z1]" class="smallfont" style="white-space:nowrap">
            <label for="rb_1_table[z1]_1"><input type="radio" name="table[z1]" id="rb_1_table[z1]_1" value="1" tabindex="1" checked="checked" />Yes</label>
            <label for="rb_0_table[z1]_1"><input type="radio" name="table[z1]" id="rb_0_table[z1]_1" value="0" tabindex="1" />No</label>
    
        </div></td>
    </tr><tr valign="top">
        <td class="alt1">z2</td>
        <td class="alt1"><div id="ctrl_table[z2]" class="smallfont" style="white-space:nowrap">
            <label for="rb_1_table[z2]_2"><input type="radio" name="table[z2]" id="rb_1_table[z2]_2" value="1" tabindex="1" checked="checked" />Yes</label>
            <label for="rb_0_table[z2]_2"><input type="radio" name="table[z2]" id="rb_0_table[z2]_2" value="0" tabindex="1" />No</label>
        </div></td>
    </tr><tr>
    
    
    </tr>
    </table>
    </form>
    Code:
    <script type="text/javascript">
    <!--
    function js_check_all_option(formobj, option)
    {
    var arr = [
    ["rb_1_table[z1]_1","rb_1_table[z2]_2"],
    ["rb_0_table[z1]_1","rb_0_table[z2]_2"]
    ];
    
        for (var i =0; i < formobj.elements.length; i++)
        {
    	    var elm = formobj.elements[i];
            
            if (elm.type == 'radio')
            {
    		for(var t = 0; t<2; t++) {
    		if(elm.id == arr[option][t]) {
                elm.checked = true;
                alert(elm.getAttribute("name"));
    			}
    			}
            }
        }
    }
    //-->
    </script>
    
    <form action="x" method="post" name="cpform" id="cpform">
    
    <table cellpadding="4" cellspacing="0" border="0" align="center" width="90%" class="tborder">
    
    <tr valign="top">
    
        <td class="thead">Name</td>
        <td class="thead"><input type="button" class="button" value=" All Yes " onclick="js_check_all_option(this.form,0)" /> <input type="button" class="button" value=" All No " onclick="js_check_all_option(this.form,1)" /></td>
    </tr><tr valign="top">
        <td class="alt1">z1</td>
    
        <td class="alt1"><div id="ctrl_table[z1]" class="smallfont" style="white-space:nowrap">
            <label for="rb_1_table[z1]_1"><input type="radio" name="table[z1]" id="rb_1_table[z1]_1" value="1" tabindex="1" checked="checked" />Yes</label>
            <label for="rb_0_table[z1]_1"><input type="radio" name="table[z1]" id="rb_0_table[z1]_1" value="0" tabindex="1" />No</label>
    
        </div></td>
    </tr><tr valign="top">
        <td class="alt1">z2</td>
        <td class="alt1"><div id="ctrl_table[z2]" class="smallfont" style="white-space:nowrap">
    
            <label for="rb_1_table[z2]_2"><input type="radio" name="table[z2]" id="rb_1_table[z2]_2" value="1" tabindex="1" checked="checked" />Yes</label>
            <label for="rb_0_table[z2]_2"><input type="radio" name="table[z2]" id="rb_0_table[z2]_2" value="0" tabindex="1" />No</label>
        </div></td>
    </tr><tr>
    
    
    </tr>
    </table>
    </form>
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.


Bookmarks

Posting Permissions

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