纠结于如何添加“;“全选”;功能与折扣

Stuck on how to add a "select all" function with discount

本文关键字：功能 全选 添加 于如何      更新时间：2023-09-26

我基本上有一个表单，它通过选择复选框来计算列表中的总数。然而，我想修改它，这样人们就可以选择"全选"，这样它就可以选择所有复选框，并使总金额达到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>

我会制作一个函数来检查是否设置了所有框，比如：

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);
相关文章：