www.webdeveloper.com
Results 1 to 14 of 14

Thread: checkbox with number

  1. #1
    Join Date
    Nov 2011
    Posts
    5

    checkbox with number

    Hey guys i'm wondering to know how to do that when theres 10 chexbox that are *checked* how can i stop the user ? mine stop at 9! i know that its a problem with the variables... well think... i tryied a lot of things with if but i didn't success... Its the poschoix that is the problem,

    Here's the code i'm using
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var add;
    	
    function valide()
    {
    	var poschoix=0;
    	var i;
    	var total=0;
    	
    		for (i=0;i<=29;i++)
    		{
    			if(poschoix!=10)
    			{
    				if (document.FrmExam.liste[i].checked)
    				{ 
    					document.FrmExam.listechoix[poschoix].value=document.FrmExam.listenom[i].value;
    					document.FrmExam.numchoix[poschoix].value = document.FrmExam.listenum[i].value;
    					
    					add=document.FrmExam.listenum[i].value*1;
    					total = (total + add);
    					document.FrmExam.Nbpoint.value=total;
    					
    					poschoix = poschoix+1;	
    					
    				}
    				else
    				{	
    				
    					document.FrmExam.listechoix[poschoix].value="";
    					document.FrmExam.numchoix[poschoix].value = "";
    
    				}
    			}
    			else
    			{
    				poschoix=poschoix-1;
    				alert("Vous ne pouvez pas dépassé 10 joueurs, veuillez en désélectionner un pour en sélectionner un autre.");
    				document.FrmExam.liste[(i-1)].checked=false		
    			
    			}
    		}	
    		
    }
    //-->
    </script>
    If u need something help, just ask and i'll gently post it. Sorry for my bad englis by the way...
    Thanks

  2. #2
    Join Date
    Jun 2009
    Posts
    16
    If I understand correctly, you want to keep the user from checking more than 10 checkboxes? I don't understand all of your code, partially because of the foreign variable names and partially because it seems to try to do more than you describe. Either way, here's how I would handle your problem as I understand it.

    Code:
    (function() {
      function checkLimit() {
        if(this.checked) {
          if(this.checks.count<this.checks.max) {
            this.checks.count++;
          } else {
            this.checked=false;
            alert('You cannot check more than '+this.checks.max+' boxes in this area.');
          }
        } else {
          this.checks.count--;
        }
      }
      window.setLimit=function(group,limit) {
        var i=0,t,obj={count:0,max:limit};
        while(t=group[i++]) {
          t.checks=obj;
          t.addEventListener('click',checkLimit);
        }
      };
    })();
    
    // now call setLimit(checkboxarray,10);
    // eg: setLimit(document.getElementsByTagName('input'),10);

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,272
    Nice code, that needs at first an other test (for other inputs)
    Code:
       if (0<this.checks.count) this.checks.count--;
    and a cross browsers addEventlistener !
    Code:
       if (t.addEventListener) t.addEventListener('click', modifyText, false);    
       else if (el.attachEvent) t.attachEvent('onclick', modifyText);
       else t.onclick=modifyText;
    Last edited by 007Julien; 12-01-2011 at 12:56 PM. Reason: complements

  4. #4
    Join Date
    Jun 2009
    Posts
    16
    I'm not sure what you're saying for the first part - if it's to deal with checkboxes that are checked before the function runs then yes, some edits would be necessary, but Koliter seems to be asking to limit only how many the user checks.

    For the second - you can go crazy making your code dinosaur-compatible; I try to follow Google's example and support the last 2 versions of the 5 major browsers, on all OSes. But you're still right - for some reason I was thinking IE10 was already mainstream. So here's a version that works with IE8.

    Code:
    (function() {
      var addLimEvent=window.addEventListener?function(el) {
        el.addEventListener('click',checkLimit);
      }:function(el) {
        el.attachEvent('onclick',checkLimit);
      };
      function checkLimit() {
        if(this.checked) {
          if(this.checks.count<this.checks.max) {
            this.checks.count++;
          } else {
            this.checked=false;
            alert('You cannot check more than '+this.checks.max+' boxes in this area.');
          }
        } else {
          this.checks.count--;
        }
      }
      window.setLimit=function(group,limit) {
        var i=0,t,obj={count:0,max:limit};
        while(t=group[i++]) {
          t.checks=obj;
          addLimEvent(t);
        }
      };
    })();
    
    // now call setLimit(checkboxarray,10);
    // eg: setLimit(document.getElementsByTagName('input'),10);

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,272
    The last two versions of the 5 major browsers, but not in IE8 ??? It is the even worse than I thought ! Try the following page for example, it do not work after a click in the input type text (witch decrease the counter), after a reload or a reset !
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Untitled</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <form>
    	<input type="checkbox"> case &#224; cocher<br>
    	<input type="checkbox"> case &#224; cocher<br>
    	<input type="checkbox"> case &#224; cocher<br>
    	<input type="checkbox"> case &#224; cocher<br>
    	<input type="checkbox"> case &#224; cocher<br>
    	<input type="text" value="Another input">
    	<input type="reset" value="reset">
    </form>
    <p id="cnt"></p>
    
    <script type="text/javascript">
    (function() {
      function checkLimit() {
        if(this.checked) {
          if(this.checks.count<this.checks.max) this.checks.count++;
          else {this.checked=false;
    				alert('You cannot check more than '+this.checks.max+' boxes in this area.');}} 
    	else if (this.checks && 0<this.checks.count) this.checks.count--;
    	document.getElementById('cnt').innerHTML=this.checks.count;
      }
      window.setLimit=function(group,limit) {
        var i=0,t,obj={count:0,max:limit};
        while(t=group[i++]) {
          t.checks=obj;
          if (t.addEventListener) t.addEventListener('click',checkLimit,false);
    			else if (t.addEvent) t.addEvent('onclick',checkLimit);
    			else t.onclick=checkLimit;
        }
      };
    })();
    setLimit(document.getElementsByTagName('input'),3);
    </script>
    </body>
    </html>
    It's a pity the code is attractive !
    Last edited by 007Julien; 12-01-2011 at 07:18 PM. Reason: complements

  6. #6
    Join Date
    Jun 2009
    Posts
    16
    Oh, I see. My function assumes it's passed a list of the checkboxes you want it applied to, so that you can define multiple areas if needed. So here's how you would use it in your test case:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Untitled</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <form>
    	<input type="checkbox"> case à cocher<br>
    	<input type="checkbox"> case à cocher<br>
    	<input type="checkbox"> case à cocher<br>
    	<input type="checkbox"> case à cocher<br>
    	<input type="checkbox"> case à cocher<br>
    	<input type="text" value="Another input">
    	<input type="reset" value="reset">
    </form>
    <p id="cnt"></p>
    
    <script type="text/javascript">
    (function() {
      var addLimEvent=window.addEventListener?function(el) {
        el.addEventListener('click',checkLimit);
      }:function(el) {
        el.attachEvent('onclick',checkLimit);
      };
      function checkLimit() {
        if(this.checked) {
          if(this.checks.count<this.checks.max) {
            this.checks.count++;
          } else {
            this.checked=false;
            alert('You cannot check more than '+this.checks.max+' boxes in this area.');
          }
        } else {
          this.checks.count--;
        }
        document.getElementById('cnt').innerHTML=this.checks.count;
      }
      window.setLimit=function(group,limit) {
        var i=0,t,obj={count:0,max:limit};
        while(t=group[i++]) {
          t.checks=obj;
          addLimEvent(t);
        }
      };
    })();
    
    var t,i=0,boxes=[],
      els=document.getElementsByTagName('input');
    while(t=els[i++])
      if(t.type=='checkbox')
        boxes[boxes.length]=t;
    setLimit(boxes,3);
    </script>
    </body>
    </html>
    Of course, the reset button still breaks it. So if you wanted to use a reset button or otherwise change the checkboxes without the user interacting with them you would have to take a different approach, like recounting the checkboxes on every click.

    I think you misunderstood me about the browsers. My goal is to support the last 2 versions of the 5 major browsers, but your comment made me check again and realize I had failed to do so. That's why I posted a new version that fixed that, though I still didn't include the oldest method because we're going to have to give it up at some point.

  7. #7
    Join Date
    Nov 2011
    Posts
    5
    well yea it does more than only look for checkbox xD it take 2 things that are accorted to the checkbox and pu them into another place. And yes that is all done, my only question is how to you put a maximum in the checkbox, i think you guys found the solution let me try and i'll say you if it worked probably tonight

    Thanks
    Koliter

  8. #8
    Join Date
    Nov 2011
    Posts
    5
    Bon je n'ai pas réussis -_-' Je suis désoler je suis simplement dans mes début de java... en fait c'est ma premiere page ... Je vais vous envoyer mon code pour que vous puissiez voir tous le code. Car j'ai esseyer de faire les fonctions checklimits mais sa na pas fonctionner.

    voici mon code :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xlmms="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    
    <!-- Penser à un meilleur titre -->
    <title>Liste des joueurs de hockey!</title>
    <meta http-equiv="Content-type" content = "test/html;
    charset=iso-8859-1"/>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var add;
    	
    function valide()
    {
    	var poschoix=0;
    	var i;
    	var total=0;
    	
    		for (i=0;i<=29;i++)
    		{
    			if(poschoix!=10)
    			{
    				if (document.FrmExam.liste[i].checked)
    				{ 
    					
    					document.FrmExam.listechoix[poschoix].value=document.FrmExam.listenom[i].value;
    					document.FrmExam.numchoix[poschoix].value = document.FrmExam.listenum[i].value;
    					
    					add=document.FrmExam.listenum[i].value*1;
    					total = (total + add);
    					document.FrmExam.Nbpoint.value=total;
    					
    					poschoix = poschoix+1;	
    					
    				}
    				else
    				{	
    				
    					document.FrmExam.listechoix[poschoix].value="";
    					document.FrmExam.numchoix[poschoix].value = "";
    
    				}
    			}
    			else
    			{
    				poschoix=poschoix-1;
    				alert("Vous ne pouvez pas dépassé 10 joueurs, veuillez en désélectionner un pour en sélectionner un autre.");
    				document.FrmExam.liste[(i-1)].checked=false			
    			}
    		}	
    		
    }
    //-->
    </script>
    
    </head>
    <body >
    
    <form id="FrmExam" name="FrmExam">
    <table>
    <TR>
    <TD COLSPAN="3">CHOIX DES JOUEURS</TD>
    <TD>COMPILATION</TD>
    </TR>
    <TR> 
    	<TD><input type="checkbox" name="liste" onchange="valide()" /></TD>
    	<TD><input type= "text" value= "Daniel Alfredsson" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.43"name="listenum"/></TD>
    	<TD></TD>
    	<TD WIDTH="200" >NOM DU JOUEUR</TD>
    	<TD WIDTH="100" >POINTAGE</TD>
    	<TD WIDTH="100"STYLE="TEXT-ALIGN:CENTER;">TOTAL </TD>
    </TR>
    <TR>
    	<TD><input type="checkbox" name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Vincent Lecavalier" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value="1.32"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 1</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    	<TD><input type="text"style="text-align:center;" readonly name="Nbpoint"> </TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Alexander Ovechkin" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.30"name="listenum" /></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 2</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>	
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Ilya Kovalchuk" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.24"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 3</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Jarome Iginla" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.26"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 4</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    </TR>
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Sidney Crosby" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.37"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 5</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Henrik Zetterberg" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.39"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 6</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Joe Thornton" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.17"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 7</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Martin St. Louis" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.08"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 8</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Ryan Getzlaf" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.06"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 9</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Jason Spezza" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value =".92"name="listenum"/></TD>
    	<TD STYLE="TEXT-ALIGN:RIGHT;">Choix 10</TD>
    	<TD><input type="text" readonly name="listechoix"> </TD>
    	<TD><input type="text" readonly name="numchoix"> </TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Pavel Datsyuk" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.00"name="listenum"/></TD>
    	<TD></TD>
    	<TD></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Evgeni Malkin" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.16"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Dany Heatley" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.32"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Marc Savard" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.14"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Mike Richards" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.26"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Mike Ribeiro" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.32"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Mats Sundin" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.30"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Marian Gaborik" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.42"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Henrik Sedinr" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.47"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Shawn Horcoff" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value =".98"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Olli Jokinen" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.22"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Kristian Huselius" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.12"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Paul Stastny" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.43"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Eric Staal" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.32"name="listenum"/></TD>
    </TR>

  9. #9
    Join Date
    Nov 2011
    Posts
    5
    suite (dsl c'&#233;tait trop long donc en 2 parties...) :

    Code:
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Daniel Sedin" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.17"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Daniel Briere" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.52"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Ray Whitney" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value =".92"name="listenum"/></TD>
    </TR>
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Brenden Morrow" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.47"name="listenum"/></TD>
    </TR>
    
    <TR>
    	<TD><input type="checkbox"name="liste"onchange="valide()"/></TD>
    	<TD><input type= "text" value= "Shane Doan" readonly name="listenom"/></TD>
    	<TD><input type="text" size = "5" readonly value ="1.02"name="listenum"/></TD>
    </TR>
    
    </table>
    
    
    </form>
    </body>
    </html>
    merci!
    Koliter

    Il suffit simplement que le message apparaisse lors du 11e checkbox... ce dont je ne suis pas capable... il apparait toujours a la 10e...

  10. #10
    Join Date
    Jun 2009
    Posts
    16
    Well gee ... either I'm more tired than I thought, or you just started speaking french. Which I do not understand.

  11. #11
    Join Date
    Nov 2011
    Posts
    5
    ho yea right .. xD mmhm the problem is that when the checkbox number 10 comes up, it just show me a message, i want that, but on the 11th checkbox not on the 10th i tried to do it but nothing worked cause if i changed the if(poschoix!=10), it just never show the meassage box. So mmhm i just didnt make it and im starting in the javascript. So all i know is in there.... The Page is up there, it is separed in 2 parts because i couldnt put more than 10 000 characters.... Its all my code, so if u wanna try something.... you can Sorry for having spoke in french xD And ur not tired hahahah :P probably i was ! :P

    Thanks and sorry
    Koliter

  12. #12
    Join Date
    Jun 2009
    Posts
    16
    Ok, I get it now, I was just having trouble visualizing it before. Well ... there are a lot of problems. You're recounting poschoix every time, so it shouldn't be a global variable and you shouldn't be subtracting from it. You should always act on liste[i], not liste[i-1], because you don't know if the previous box is checked (so unchecking it may do nothing). Also, you should be unchecking the box the user just checked, not the last one in the list.

    There are those issues, and a few matters of efficiency. Then there are bad practices, like putting javascript in attributes and in the head. As a rule of thumb, you should use javascript to attach events and put all your code right before the </body> tag if you can - this way the entire page can be displayed before the browser starts worrying about javascript.

    Anyway, here's a new page for you. Notice that it takes a few different approaches: I added a global "count" variable, which keeps track of how many boxes are checked. This way, if a user tries to check an 11th box, you can just uncheck that box and do nothing else. I attached the events in a way that preserves "this", so now "valide" can refer to the box being checked as "this". And I took the box clearing outside of the loop, so it isn't executed more than once. But, it's probably easier to just look at the code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xlmms="http://www.w3.org/1999/xhtml" xml:lang="fr">
      <head>
        <!-- Penser à un meilleur titre -->
        <title>Liste des joueurs de hockey!</title>
        <meta http-equiv="Content-type" content = "test/html; charset=iso-8859-1"/>
      </head>
      <body >
        <form id="FrmExam" name="FrmExam">
          <table>[...]</table>
        </form>
        <script language="JavaScript" type="text/javascript">
    
    
    var count=0;
    
    function valide()
    {
      var i=0,t,poschoix=0,total=0;
      if(this.checked&&count==10) {
        this.checked=false;
        alert("Vous ne pouvez pas dépassé 10 joueurs, veuillez en désélectionner un pour en sélectionner un autre.");
      } else {
        count+=this.checked?1:-1;
        for(i=0;i<document.FrmExam.liste.length;i++) {
          if(document.FrmExam.liste[i].checked) {
            document.FrmExam.listechoix[poschoix].value=document.FrmExam.listenom[i].value;
            document.FrmExam.numchoix[poschoix].value  =document.FrmExam.listenum[i].value;
            poschoix++;
            total+=+document.FrmExam.listenum[i].value;
          }
        }
        if(poschoix<10) {
          document.FrmExam.listechoix[poschoix].value="";
          document.FrmExam.numchoix[poschoix].value  ="";
        }
        document.FrmExam.Nbpoint.value=total;
      }
    }
    
    var t,i=0,
      els=document.getElementsByName('liste');
    while(t=els[i++])
      t.onclick=valide;
    
    
        </script>
      </body>
    </html>
    Hope that finally answers your question!

  13. #13
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Hi there,

    as this is my first post I might as well do it right Please note that the javascript AND HTML have been redone/cleaned up.

    Please see attached...
    Attached Files Attached Files

  14. #14
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    My attempt...

    All the code has been redone/cleaned up.
    I left readonly alone just so the post fit into the maximum length, it should be readonly="readonly" :P

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xlmms="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    
    <!-- Penser à un meilleur titre -->
    <title>Liste des joueurs de hockey!</title>
    <meta http-equiv="Content-type" content = "test/html; charset=iso-8859-1"/>
    </head>
    <body>
    <form id="FrmExam" name="FrmExam">
    	<table>
    		<tr>
    			<td colspan="3">CHOIX DES JOUEURS</td>
    			<td>COMPILATION</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" onchange="valide()" /></td>
    			<td><input value="Daniel Alfredsson" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.43" name="listenum" /></td>
    			<td></td>
    			<td width="200" >NOM DU JOUEUR</td>
    			<td width="100" >POINTAGE</td>
    			<td width="100"style="TEXT-ALIGN:CENTER;">TOTAL </td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Vincent Lecavalier" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.32" name="listenum" /></td>
    			<td style="text-align: right;">Choix 1</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    			<td><input style="text-align:center;" readonly name="Nbpoint" /> </td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Alexander Ovechkin" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.30" name="listenum" /></td>
    			<td style="text-align: right;">Choix 2</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Ilya Kovalchuk" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.24" name="listenum" /></td>
    			<td style="text-align: right;">Choix 3</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Jarome Iginla" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.26" name="listenum" /></td>
    			<td style="text-align: right;">Choix 4</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Sidney Crosby" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.37" name="listenum" /></td>
    			<td style="text-align: right;">Choix 5</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Henrik Zetterberg" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.39" name="listenum" /></td>
    			<td style="text-align: right;">Choix 6</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Joe Thornton" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.17" name="listenum" /></td>
    			<td style="text-align: right;">Choix 7</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Martin St. Louis" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.08" name="listenum" /></td>
    			<td style="text-align: right;">Choix 8</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Ryan Getzlaf" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.06" name="listenum" /></td>
    			<td style="text-align: right;">Choix 9</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Jason Spezza" readonly name="listenom" /></td>
    			<td><input size="5" readonly value=".92" name="listenum" /></td>
    			<td style="text-align: right;">Choix 10</td>
    			<td><input readonly name="listechoix" /></td>
    			<td><input readonly name="numchoix" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Pavel Datsyuk" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.00" name="listenum" /></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Evgeni Malkin" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.16" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Dany Heatley" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.32" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Marc Savard" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.14" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Mike Richards" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.26" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Mike Ribeiro" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.32" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Mats Sundin" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.30" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Marian Gaborik" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.42" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Henrik Sedinr" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.47" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Shawn Horcoff" readonly name="listenom" /></td>
    			<td><input size="5" readonly value=".98" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Olli Jokinen" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.22" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Kristian Huselius" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.12" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Paul Stastny" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.43" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Eric Staal" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.32" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Daniel Sedin" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.17" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Daniel Briere" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.52" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Ray Whitney" readonly name="listenom" /></td>
    			<td><input size="5" readonly value=".92" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Brenden Morrow" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.47" name="listenum" /></td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="liste" /></td>
    			<td><input value="Shane Doan" readonly name="listenom" /></td>
    			<td><input size="5" readonly value="1.02" name="listenum" /></td>
    		</tr>
    	</table>
    	<script type="text/javascript">
    
    		(function()
    		{
    			var
    				liste      = document.FrmExam.liste,
    				listenom   = document.FrmExam.listenom,
    				listenum   = document.FrmExam.listenum,
    				listechoix = document.FrmExam.listechoix,
    				numchoix   = document.FrmExam.numchoix,
    				Nbpoint    = document.FrmExam.Nbpoint,
    				onClick, refreshList, i;
    
    			refreshList = function()
    			{
    				var i, j, total = 0;
    				for (i = 0, j = 0; i < liste.length; i++) {if (liste[i].checked) {
    					listechoix[j].value = listenom[i].value;
    					numchoix[j].value   = listenum[i].value;
    					total += +listenum[i].value;
    					j++;
    				}}
    				while (j < listechoix.length) {
    					listechoix[j].value = '';
    					numchoix[j].value   = '';
    					j++;
    				}
    				Nbpoint.value = Number(total).toFixed(2);
    			};
    			onClick = function()
    			{
    				var i, j;
    				for (i = 0, j = 0; i < liste.length; i++) {if (liste[i].checked) {j++;}}
    				if (j > listechoix.length) {this.checked = false;
    					alert('Vous ne pouvez pas dépassé 10 joueurs, veuillez en désélectionner un pour en sélectionner un autre.');
    				} else {
    					refreshList();
    				}
    			};
    			for (i = 0; i < liste.length; i++) {liste[i].onclick = onClick;}
    		}());
    
    	</script>
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles