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
    SitePoint Addict
    Join Date
    Aug 2006
    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 06:11.
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  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
    SitePoint Addict
    Join Date
    Aug 2006
    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>
    Bismillahirrahmanirrahîm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.


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
  •