动态控制按钮的onclick事件
我想实现的效果是：
1.根据复选框的值来判断按钮是全喜欢或者全不喜欢。
2.根据按钮的value来控制复选框的全选或全不选
<!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>
<title></title>
<style type="text/css">
#Checkbox1
{
width: 20px;
}
</style>
</head>
<script>
function a() {
var a = document.getElementsByName("ic");
for (var i = 0; i < a.length; i++) {
a[i].checked = true;
}
b();
}
function b() {
var a = document.getElementsByName("ic");
var b = 0;
for (var i = 0; i < a.length; i++) {
if (a[i].checked == true) {
b++;
}
}
if (b == 4) {
document.getElementById("Button1").onclick = function () { d(); };
document.getElementById("Button1").value = "全不喜欢";
}
else {
document.getElementById("Button1").onclick = function () { a(); };
document.getElementById("Button1").value = "全喜欢";
}
}
function d() {
var a = document.getElementsByName("ic");
for (var i = 0; i < a.length; i++) {
a[i].checked = false;
}
document.getElementById("Button1").onclick = function () { a(); };
document.getElementById("Button1").value = "全喜欢";
}
</script>
<body>
<p>
你喜欢那种类型咖啡</p>
<p>
<input name="ic" id="Checkbox1" type="checkbox" onclick="b()" />蓝山咖啡</p>
<p>
<input name="ic" id="Checkbox2" type="checkbox" onclick="b()" />摩卡</p>
<p>
<input name="ic" id="Checkbox3" type="checkbox" onclick="b()" />拿铁</p>
<p>
<input name="ic" id="Checkbox4" type="checkbox" onclick="b()" />卡布奇诺</p>
<p>
<input name="io" id="Button1" type="button" value="全喜欢" onclick="a()"/></p>
</body>
</html>
第七科灬水高3回答
-
慕的地8582982
YOBEJQPMZTELXUOFGWDVDGXNDWBBHADWAVYBUVOYNABOWZWZCMTWFMJSOOZPZSPEVVAJMKADDZPGWQGFQSGWVIKKAASNQTHHDJJNJMTCCCCLIMUQAHNYOLQANLCBWKPRHGILFDMFUZVFPYDFUFZFYWQGVFBRYWLLWWCCIYOIJXOUPLCZJSSCFZPTTWQAUKSNTDWCJPOYLLXJZCSQGYUNFMWTNMPJDJJUKDXBDBPJFMPYYQWMJFLMXDEYORKERTPTCGDZGZPEOBSLVGGWIXDUQNGGGMPPCJTPMCGVEUKGDCRCLBEAJMVYKGWFHDZJEBKHJGDNXBDGQBXTQNJHDGILVDFPLOYUDZCYEGQNDOKAVXUXWUVLISFGMWXTXACZVFPSHXNXGDGVTIMACQILIRVYAQNGCGILILUEGDCRUDLVQACAJURHXGQTWSITOQNXFCFBQOMJSBRADAKZPZVKFUXUXGVTPFNXSORGXGDTIXOLHEMJMIZJEIEHDFCEBXPEOWMBROXHQWSVLCSJFBECUEBEMVLHDURTCSTJUJTCFORORHYULUDNWVJZWFVLUKNDGCZPGWGCYJAOEMQZCAKGWTFULVMPYIRBRPQGILCYBKNKZCSVSOQHQUDPSWZCSORZCZBJZPSORUPNDTIRTWTWLHLCTPZBJSVLADUCKBXHEHKMPTZOFHRUDMVMWZBXHQAEVXUEEGDYBKURURGTPZPYVYUQBXDZBZIYBETWMTCFIEGPFBLIMILMJSBLVEVXFPZOSVYHXUZCMJMKUIXCSKXISUENKZJSADMWAZJFPORGWMWFWZPRUDSVSILVLBDYPVXCLUQAJYIYFNYIRFIKTDABQBXIROYHEURUQTXNXHWZXZCZUSISCEHW -
慕田峪3555374
<html> <script language=javascript> function selectAll(){ var a = document.getElementsByTagName("input"); if(a[0].checked){ for(var i = 0;i<a.length;i++){ if(a[i].type == "checkbox") a[i].checked = false; } } else{ for(var i = 0;i<a.length;i++){ if(a[i].type == "checkbox") a[i].checked = true; } } } </script> <input type="checkbox" value=1 /> <input type="checkbox" value=2 /> <input type="checkbox" value=3 /> <input type="checkbox" value=4 /> <input type="checkbox" value=5 /> <input type="button" name="select" onclick="selectAll()" value="全选/全不选"/> </html> -
慕田峪3555374
获取所有复选框，过滤判断状态及数量
随时随地看视频慕课网APP
Html/CSS
JavaScript