2012-03-02 34 views
0

我基本上有一個表格,通過選擇複選框來計算列表中的總計。但是,我想對其進行修改,以便人們可以選擇「全部檢查」,以便選擇所有複選框,並且總計爲999美元,而不是如果他們只是逐個添加所有項目,那將會是什麼。所以,如果他們選擇所有的複選框,它基本上是一個折扣。有沒有人做過這樣的事情?任何幫助將不勝感激。堅持如何添加一個「全選」功能的折扣

這裏是我現在所擁有的代碼,而我只是停留在這...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" /> 
<link rel="icon" type="image/x-con" href="../favicon.ico" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<!-- Begin JavaScript --> 
<!--- ADDING THE CHECK BOXES ---> 
<script language="javascript" type="text/javascript"> 
    //Define global form total: 
    var form_amount=0; 
    //Define function to manipulate the form total per item selected/deselected: 
    function CheckChoice(whichbox) 
    { 
    //If box was checked, accumulate the checkbox value as the form total, 
    //Otherwise, reduce the form total by the checkbox value: 
    if (whichbox.checked == false) 
     { form_amount -= eval(whichbox.value); } 
    else { form_amount += eval(whichbox.value); } 

    //Re-set displayed total on form: 
    document.MyAddingForm.amount.value = eval(form_amount); 
    } 
    //Define function to init the form on reload: 
    function InitForm() 
    { 
    //Reset the displayed total on form: 
    document.MyAddingForm.amount.value='0'; 
    //Set all checkboxes on form to unchecked: 
    for (xx=0; xx < document.MyAddingForm.elements.length; xx++) 
    { 
     if (document.MyAddingForm.elements[xx].type == 'checkbox') 
     { 
     document.MyAddingForm.elements[xx].checked = false; 
     } 
    } 
    } 

</script> 



<title>Add Boxes</title> 
</head> 

<body> 


      <form action="BLANKPAGE_TEST_2.cfm" method="post" id="addCommentForm" name="MyAddingForm" onsubmit="return submit_form()"> 
       <table id="commentTable"> 
        <tr> 
        <th><label>Item One</label></th> 
        <td> 
        <label><input type="checkbox" name="ItemOne" value="119.00" onclick="CheckChoice(this);" onfocus="startCalc();" onblur="stopCalc();" class="checkbox" /> $119</label></td> 
        </tr> 
        <tr> 
        <th><label>Item Two</label></th> 
        <td> 
        <label><input type="checkbox" name="ItemTwo" value="119.00" onclick="CheckChoice(this);" onfocus="startCalc();" onblur="stopCalc();" class="checkbox" /> $119</label></td> 
        </tr> 
        <tr> 
        <th><label>Item Three</label></th> 
        <td> 
        <label><input type="checkbox" name="ItemThree" value="119.00" onclick="CheckChoice(this);" onfocus="startCalc();" onblur="stopCalc();" class="checkbox" /> $119</label></td> 
        </tr> 
        <tr> 
        <th><label>Item Four</label></th> 
        <td> 
        <label><input type="checkbox" name="ItemFour" value="119.00" onclick="CheckChoice(this);" onfocus="startCalc();" onblur="stopCalc();" class="checkbox" /> $119</label></td> 
        </tr> 
        <tr> 
        <th><label>Item Five</label></th> 
        <td> 
        <label><input type="checkbox" name="ItemFive" value="119.00" onclick="CheckChoice(this);" onfocus="startCalc();" onblur="stopCalc();" class="checkbox" /> $119</label></td> 
        </tr> 
        <tr> 
        <th class="altTH"><label>Total $:</label></th> 
        <td class="altTD"><input type="text" name="amount" readonly="readonly" class="inputSmall" /></td> 
        </tr> 
       </table> 
      </form> 

</body> 
</html> 

回答

0

我prolly做一個函數,檢查所有箱子設置,是這樣的:

function allChecked() 
{ 
for (xx=0; xx < document.MyAddingForm.elements.length; xx++) 
{ 
    if (document.MyAddingForm.elements[xx].type == 'checkbox' && document.MyAddingForm.elements[xx].checked == false) 
     return false; 
} 
return true; 
} 

之後,你可以稱它在你的CheckChoise()函數和量達到999

if(allChecked()) 
     document.MyAddingForm.amount.value = '999'; 
    else 
     //Re-set displayed total on form: 
     document.MyAddingForm.amount.value = eval(form_amount); 
+0

這是偉大的作品!現在,將「全部選中」和「取消全選」選項與此集成很簡單嗎? – Amir 2012-03-02 19:53:50