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
    Apr 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    check another checkbox when checked

    hi,
    i have 2 sets of checkbox. when i click a button i want the same checkbox to be checked on the other set of checkbox.
    i dont know how to write the function.
    thanks ofir.

    <form method="POST" action="Form.asp" name="Form1">
    set 1:
    <input type="checkbox" name="Cbox1" value="311" checked>Engineering
    <input type="checkbox" name="Cbox1" value="307" >Environment
    <input type="checkbox" name="Cbox1" value="299" checked>Fire
    <input type="checkbox" name="Cbox1" value="306" >Industry

    set 2:
    <input type="checkbox" name="Cbox2" value="311" checked>Engineering
    <A Href=javascript:checked(311);>checked</a>
    <input type="checkbox" name="Cbox2" value="307" >Environment
    <A Href=javascript:checked(307);>checked</a>
    <input type="checkbox" name="Cbox2" value="299" checked>Fire
    <A Href=javascript:checked(299);>checked</a>
    <input type="checkbox" name="Cbox2" value="306" >Industry
    <A Href=javascript:checked(306);>checked</a>

    </form>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    This was a bit harder than I'd first thought it would be. Because you're using checkbox groups (multiple checkboxes with same name), in order to match which checkbox was just checked, it is necessary to walk the array checking for values. (I couldn't find a way to lookup the array index of the clicked checkbox without using a loop.)

    Here's what I've got, it works great but there are some hard-coded elements in it which reduce its reusability somewhat.
    Code:
    <script type="text/javascript">
    function checkTwice(c){
      f = c.form; v = c.value; cbox2 = f.elements["Cbox2"];
      for(var i = 0; i < cbox2.length; i++)
        if(cbox2[i].value == v) break;
      cbox2[i].checked = c.checked;
    }
    </script>
    <form method="POST" action="Form.asp" name="Form1">
    <fieldset><legend>set 1:</legend>
    <input type="checkbox" name="Cbox1" value="311" checked onclick="checkTwice(this)">Engineering
    <input type="checkbox" name="Cbox1" value="307" onclick="checkTwice(this)">Environment
    <input type="checkbox" name="Cbox1" value="299" checked onclick="checkTwice(this)">Fire
    <input type="checkbox" name="Cbox1" value="306" onclick="checkTwice(this)">Industry
    </fieldset>
    <fieldset><legend>set 2:</legend>
    <input type="checkbox" name="Cbox2" value="311" checked>Engineering
    <A Href=javascript:checked(311);>checked</a>
    <input type="checkbox" name="Cbox2" value="307" >Environment
    <A Href=javascript:checked(307);>checked</a>
    <input type="checkbox" name="Cbox2" value="299" checked>Fire
    <A Href=javascript:checked(299);>checked</a>
    <input type="checkbox" name="Cbox2" value="306" >Industry
    <A Href=javascript:checked(306);>checked</a>
    </fieldset>
    </form>

  • #3
    New Coder
    Join Date
    Apr 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reply.
    its work grate.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    a more dinamic aproach might be:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    checkTwice(){
    var 
    objOne=document.getElementById('Cbox1').getElementsByTagName('input');
    var 
    objTwo=document.getElementById('Cbox2').getElementsByTagName('input');
    for(var 
    i=0;i<objOne.length;i++){
        if(
    objOne[i].checked){objTwo[i].checked=true}
        else{
    objTwo[i].checked=false}
    }
    }
    </script>
    </head>
    <body>
    <div id="Cbox1">
    <input type="checkbox" value="311" checked onclick="checkTwice()">Engineering
    <input type="checkbox" value="307" onclick="checkTwice()">Environment
    <input type="checkbox" value="299" checked onclick="checkTwice()">Fire
    <input type="checkbox" value="306" onclick="checkTwice()">Industry
    </div>
    <div id="Cbox2">
    <input type="checkbox" value="311" checked>Engineering
    <A Href=javascript:checked(311);>checked</a>
    <input type="checkbox" value="307" >Environment
    <A Href=javascript:checked(307);>checked</a>
    <input type="checkbox" value="299" checked>Fire
    <A Href=javascript:checked(299);>checked</a>
    <input type="checkbox" value="306" >Industry
    <A Href=javascript:checked(306);>checked</a>
    </div>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    Kor

    Removing the name attribute of the inputs will likely have a negative effect if this form is processed by a server-side script.

    Your script also assumes that the checkboxes will be in the same order between cbox1 and cbox2 and that no other inputs will be present.
    Last edited by kansel; 11-09-2004 at 05:27 PM.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Removing the name attribute of the inputs will likely have a negative effect if this form is processed by a server-side script.
    I presumed ofiroth knows enough HTML to use names on form's elements. I only wanted to show that he might use whichever names, whichever values, no matter the number of checkboxes, as long as both groups have same length. That is a full dynamic solution, I reckon...
    Your script also assumes that the checkboxes will be in the same order
    Nope. ofiroth's HTML code assumes that. I did that for his code. On the other hand I see no reason for a different order...
    I did not say that my solution is the best or the worst. It is just a different aproach, that is all.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by ofiroth
    i have 2 sets of checkbox. when i click a button i want the same checkbox to be checked on the other set of checkbox.
    What is the point of this?


  •  

    Posting Permissions

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