JSは単一選択、複数選択、全選択、逆選択を実現します.
9352 ワード
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> title>
<script type="text/javascript" src="jquery-1.4.2.js">script>
<script type="text/javascript" src="choose.js">script>
head>
<body>
<div > div>
<input type="checkbox" name="item" value="3000" /> 3000 <br />
<input type="checkbox" name="item" value="2500"/>HTC 2500<br />
<input type="checkbox" name="item" value="8000" /> 8000<br />
<input type="checkbox" name="item" value="1500" />IPAD1500<br />
<input type="checkbox" name="item" value="400" /> 400<br />
<input type="checkbox" id="all1" name="all""/>
checkbox" id="all2" name="all""/>
：
sumId">span>
body>
html>
$(function(){
Buy();
})
function Buy(){
//
$("input[name=item]").each(function(){
$(this).click(function(){
count();
chooseAll();
})
})
//
$("#all1").click(function(){
$("input[name=item]").each(function(){
$(this).attr("checked", "checked");
})
$("#all2").attr("checked", "");
count();
})
//
$("#all2").click(function(){
$("input[name=item]").each(function(){
if(this.checked){
$(this).attr("checked", "")
}else{
$(this).attr("checked", "checked")
}
$("#all1").attr("checked", "");
chooseAll();
count();
})
})
}
//
function count(){
var checked = $("input[name=item]:checked");
var all = $("input[name=item]");
var sum = 0;
for(var i = 0; i < checked.length; i ++){
sum += checked[i].value/1;
}
$("#sumId").html(sum + " ");
}
//
function chooseAll(){
var checked = $("input[name=item]:checked");
var all = $("input[name=item]");
if(checked.length == all.length){
$("#all1").attr("checked", "checked");
$("#all2").attr("checked", "");
}
}