2012-06-24 59 views
0

我創建了以下的文件夾table,它爲用戶提供了使用複選框來選擇選項的選項。我將選擇的數量限制爲四個,但它選擇了四個以上的選擇。限制用戶在PHP中選擇的複選框的數量

HTML:

<table width="100%" border="0"> 
    <tr> 
     <th width="37%" height="19" align="center" bgcolor="#CCCCCC"> 
      <strong>Biological</strong> 
     </th> 
     <th width="37%" align="center" bgcolor="#CCCCCC"> 
      <strong>Psychological</strong> 
     </th> 
     <th width="37%" align="center" bgcolor="#CCCCCC"> 
      <strong>Social</strong> 
     </th> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="Antidepressant" id="Antidepressant" value="Antidepressant" onclick="chkcontrol(1)" /> 
      <label for="Antidepressant"></label>Antidepressant</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="Antipsychotic oral" id="Antipsychotic oral" value="Antipsychotic oral" onclick="chkcontrol(2)" /> 
      <label for="Antipsychotic oral"></label>Antipsychotic oral</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="Antipsychotic_depot" id="Antipsychotic depot" value="Antipsychotic depot" onclick="chkcontrol(3)" /> 
      <label for="Antipsychotic depot"></label>Antipsychotic depot</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="Bblocker" id="B-blocker" value="B-blocker" onclick="chkcontrol(4)" /> 
      <label for="B-blocker"></label>B-blocker</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="Benzodiazepine" id="Benzodiazepine" value="Benzodiazepine" onclick="chkcontrol(5)" /> 
      <label for="Benzodiazepine"></label>Benzodiazepine</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="Mood_stabiliser" id="Mood stabiliser" value="Mood stabiliser" onclick="chkcontrol(6)" /> 
      <label for="Mood stabiliser"></label>Mood stabiliser</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="ECT" id="ECT" value="ECT" onclick="chkcontrol(7)" /> 
      <label for="ECT"></label>ECT</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="radio" name="Otherbio" id="Other" value="Other" /> 
      <label for="Other"></label>Other</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

用於CHEC選擇數量的腳本:

function chkcontrol(j) { 
    var total = 0; 
    for (var i = 0; i < document.form1.ckb.length; i++) { 
     if (document.form1.ckb[i].checked) { 
      total = total + 1; 
     } 
     if (total > 4) { 
      alert("Please Select only three") 
      document.form1.ckb[j].checked = false; 
      return false; 
     } 
    } 
} 

以下是截圖:

enter image description here

+0

但腳本無法正常工作並且允許用戶選擇4個以上的選項 – Tina

+2

PHP與此有什麼關係?其唯一的javascript .. – SuperSaiyan

+2

首發,那些單選按鈕不復選框。 – tradyblix

回答

1

一些小的更正後:

<html> 
<head> 
<script type="text/javascript"> 
function chkcontrol(j) { 
    var total=0; 
    for(var i=0; i < document.form1.ckb.length; i++){ 
     if(document.form1.ckb[i].checked){ 
      total =total +1; 
     } 
     if(total > 4){ 
      alert("Please Select only four!") 
      document.form1.ckb[j].checked = false ; 
      return false; 
     } 
    } 
} 
</script> 

</head> 
<body> 
<table width="100%" border="0"> 
    <form action="" id="form1" name="form1"> 
      <tr> 
       <th width="37%" height="19" align="center" bgcolor="#CCCCCC"><strong>Biological</strong></th> 
       <th width="37%" align="center" bgcolor="#CCCCCC"><strong> Psychological</strong></th> 
       <th width="37%" align="center" bgcolor="#CCCCCC"><strong> Social</strong></th> 
      </tr> 
      <tr> 
       <td><input type="radio" name="Antidepressant" id="ckb" value="Antidepressant" onclick="chkcontrol(0);" /> 
       <label for="Antidepressant"></label>Antidepressant</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td><input type="radio" name="Antipsychotic oral" id="ckb" value="Antipsychotic oral" onclick="chkcontrol(1);" /> 
       <label for="Antipsychotic oral"></label>Antipsychotic oral</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td><input type="radio" name="Antipsychotic_depot" id="ckb" value="Antipsychotic depot" onclick="chkcontrol(2);" /> 
       <label for="Antipsychotic depot"></label>Antipsychotic depot</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td><input type="radio" name="Bblocker" id="ckb" value="B-blocker" onclick="chkcontrol(3);"/> 
       <label for="B-blocker"></label>B-blocker</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td><input type="radio" name="Benzodiazepine" id="ckb" value="Benzodiazepine" onclick="chkcontrol(4);"/> 
       <label for="Benzodiazepine"></label>Benzodiazepine</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td><input type="radio" name="Mood_stabiliser" id="ckb" value="Mood stabiliser" onclick="chkcontrol(5);"/> 
       <label for="Mood stabiliser"></label>Mood stabiliser</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td><input type="radio" name="ECT" id="ckb" value="ECT" onclick="chkcontrol(6);"/> 
       <label for="ECT"></label>ECT</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td><input type="radio" name="Otherbio" id="ckb" value="Other" onclick="chkcontrol(7);"/> 
       <label for="Other"></label> 
       Other</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
     </form> 
    </table> 
</body> 
</html> 

儘管如此,它沒有任何意義,因爲表格並未在任何地方提交其內容,但它是一個很好的POC。

+3

multiple'id =「ckb」'不正確。 '

+0

謝謝..現在工作得很好:)再次感謝 – Tina

+0

@Tina - 你的代碼中有*多*多錯誤。看到我上面的評論。 –