亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

Web前端案例_多選練習(xí)案例

來(lái)源：Ag_persistence 發(fā)布時(shí)間：2018-11-22 14:11:34 閱讀量：1156

Web前端案例_多選練習(xí)案例


關(guān)于多選框的checked屬性以及span標(biāo)簽的innerhtml屬性的練習(xí)。


1.案例分析


利用多選框的checked屬性以及span標(biāo)簽的innerHTML屬性實(shí)現(xiàn)此案例。




2.實(shí)現(xiàn)效果


點(diǎn)擊全選框，實(shí)現(xiàn)選擇框已經(jīng)選中的變未選中，未選中的變選中，點(diǎn)擊計(jì)算總價(jià)按鈕，實(shí)現(xiàn)價(jià)格的實(shí)時(shí)更新




3.實(shí)現(xiàn)代碼



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

全選:<input type="checkbox" id="all" onclick="checkAll()"/><br />

    <input type="checkbox" name="computer" value="2000" />筆記本1 2000元<br />

    <input type="checkbox" name="computer" value="2000" />筆記本2 2000元<br />

    <input type="checkbox" name="computer" value="2000" />筆記本3 2000元<br />

        <input type="checkbox" name="computer" value="2000" />筆記本4 2000元<br />

        <input type="checkbox" name="computer" value="2000" />筆記本5 2000元<br />

        <input type="checkbox" name="computer" value="2000" />筆記本6 2000元<br />

        <input type="button" value="計(jì)算總價(jià)" onclick="addPrice()" /><span id="price"></span>

</body>

<script>

function checkAll(){

//var all = document.getElementById("all");

var computer = document.getElementsByName("computer");

for (var i=0;i<computer.length;i++) {

if(computer[i].checked){

computer[i].checked = false;

}else{

computer[i].checked = true;

}

}

}

function addPrice(){

var price = 0;

var computer = document.getElementsByName("computer");

var span = document.getElementById("price");

for (var i=0;i<computer.length;i++) {

if(computer[i].checked){

var tPrice = parseInt(computer[i].value);

price += tPrice;

}

}

span.innerHTML = price+"元";

}

</script>

</html>



4.效果截圖


 




5.總結(jié)分析


案例實(shí)現(xiàn)沒(méi)有太大的難度，主要就是獲取對(duì)應(yīng)的標(biāo)簽對(duì)象，利用對(duì)象的相關(guān)屬性加以實(shí)現(xiàn)，稍微有點(diǎn)邏輯問(wèn)題。

--------------------- 



標(biāo)簽： PHP
分享：
評(píng)論：
你還沒(méi)有登錄，請(qǐng)先

熱門文章

    推薦文章