As shown in the picture:
The implementation of the select all button is:
The code copy is as follows:
<input type="checkbox" name="all" onclick="checkAll()" />Select all<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan<br />
<input type="checkbox" name="all" onclick="checkAll()" />Select all<br />
<input type="button" value="get the total amount" onclick="getSum()" />
<span id="sum"></span>
The final span tag is used to store the area that displays the total amount.
The code that implements two "select all" functions is:
The code copy is as follows:
function checkAll()
{
//var allNode = document.getElementsByName("all")[0];
//Get the clicked element
var allNode = event.srcElement;
var item = document.getElementsByName("item");
for(var x=0;x<item.length;x++)
{
item[x].checked = allNode.checked;
}
}
event.srcElement implements the acquisition of the response event button.
The for loop modifies the checked property for each multi-check box.
The method of calculating the total amount is:
The code copy is as follows:
function getSum()
{
var item = document.getElementsByName("item");
var sum = 0;
for(var x=0;x<item.length;x++)
{
if(item[x].checked)
{
sum+=parseInt(item[x].value);
}
}
var spanNode = document.getElementById("sum");
spanNode.innerHTML = (sum+"meta").fontsize(7);
}
Adds up the value values of all selected check boxes.