Question

我基本上有一个表单，通过选中复选框来计算列表中的总计。但是，我想修改它，以便人们可以选择“全部检查”，这样它就会选中所有复选框，并且总计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>

Answer 1

我会做一个函数来检查是否所有的盒子都已设置，如下所示：

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);

坚持如何添加折扣的“全选”功能

1 个答案: