Javascript：簡單易懂的，復(fù)選框聯(lián)動全選，很實用！

果您覺得該文章對您有幫助，讓更多人受用，請關(guān)注“鍵盤碼農(nóng)”，轉(zhuǎn)發(fā)該文章。謝謝您的支持！

今天跟大家寫了一份js的聯(lián)動全選的源碼，代碼少，清晰易懂。

效果是這樣的：

點擊全選下面的就會被全部全選，或者下面的被一一選擇，全選按鈕也會被選中。運用復(fù)選框來實現(xiàn)的聯(lián)動全選的功能。

點擊上面的復(fù)選框就會被全選

Javascript：聯(lián)動全選

當下放的復(fù)選框沒有被全選，最上面的全選按鈕未被選中

復(fù)選框聯(lián)動全選js代碼實現(xiàn)：

<!DOCTYPE html>

<html>

<head>

window.onload = function ()

{

var oBtn1 = document.getElementById('btn1');

var oBox = document.getElementById('box');

var oInputs = oBox.getElementsByTagName('input');

oBtn1.onclick = function ()

{

if (oBtn1.checked == true) {

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

oInputs[i].checked = true;

}

} else {

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

oInputs[i].checked = false;

}

//點擊每一個input框

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

oInputs[i].onclick = function ()

{

var n = 0;

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

if (oInputs[i].checked == true) {

n++;

}

if (n == oInputs.length) {

oBtn1.checked = true;

} else {

oBtn1.checked = false;

}

</script>

</head>

<body>

</div>

</body>

</html>

相對比較簡單，對于初學(xué)者應(yīng)該有很好的幫助！請關(guān)注鍵盤碼農(nóng)。后期繼續(xù)更新，如有什么看法請在下方評論。第一時間為您解答哦！

TML 代碼約定

很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。

使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。

而針對于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。

菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。

菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發(fā)生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內(nèi)容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現(xiàn)在省略 head 標簽還不推薦使用。

元數(shù)據(jù)

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規(guī)則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規(guī)則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結(jié)尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規(guī)則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導(dǎo)致 JavaScript 執(zhí)行錯誤。

以下兩個 JavaScript 語句會輸出不同結(jié)果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

訪問 JavaScript 代碼規(guī)范。

使用小寫文件名

大多 Web 服務(wù)器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務(wù)器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區(qū)別

.htm 和 .html 的擴展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會把它們當作 HTML 文件來處理。

區(qū)別在于：

.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個字符。

在 Unix 系統(tǒng)中后綴沒有特別限制，一般用 .html。

技術(shù)上區(qū)別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務(wù)器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務(wù)器可以設(shè)置多個默認文件，你可以根據(jù)需要設(shè)置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

章我們給大家講解一下什么是css選擇器？css3中5種常見的基本選擇器。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一：什么是css選擇器？

CSS是一種用于屏幕上渲染html，xml等一種語言，CSS主要是在相應(yīng)的元素中應(yīng)用樣式，來渲染相對應(yīng)用的元素，那么這樣我們選擇相應(yīng)的元素就很重要了，如何選擇對應(yīng)的元素，此時就需要我們所說的選擇器。在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。選擇器主要是用來確定html的樹形結(jié)構(gòu)中的DOM元素節(jié)點。

二：css3中5種常見的基本選擇器

css3中的選擇器種類有很多，下面介紹的是5種常見的基本選擇器：通配選擇器，類選擇器，元素選擇器， ID選擇器和群組選擇器。

1.通配符選擇器（所有瀏覽器支持）
通用選擇器用*來表示，用來選擇所有元素，，也可以選擇某個元素下的所有元素；

*{marigin: 0;
 padding: 0;
 font-size: 14px;
}

上面代碼大家在reset樣式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都設(shè)置為0，字體大小都設(shè)置為14px,另外一種就是選擇某個元素下的所有元素：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>通配符選擇器</title>
 <style>
 .demo * {
 width: 50px;
 height: 50px;
 border:1px solid blue;
 margin: 10px;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <div>1</div>
 <p>2</p>
 <span>3</span>
 </div>
 </body>
</html>

效果圖：

我們可以看到在demo元素里的三個子元素div，p，span都是分別沒有設(shè)置css樣式的，但只要我們設(shè)置了demo元素下的所有元素的統(tǒng)一樣式，那么demo元素里的三個子元素div，p，span就會出現(xiàn)樣式。

對了，在這里說一下，我目前是在職web前端開發(fā)，如果你現(xiàn)在正在學(xué)習(xí)前端，了解前端，渴望成為一名合格的web前端開發(fā)工程師，在入門學(xué)習(xí)前端的過程當中有遇見任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題，都可以隨時關(guān)注并私信我：前端，我都會根據(jù)大家的問題給出針對性的建議，缺乏基礎(chǔ)入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎(chǔ)精講視頻教程，還有我做web前端技術(shù)這段時間整理的一些學(xué)習(xí)手冊，面試題，開發(fā)工具，PDF文檔書籍教程，都可以直接分享給大家。

2.類選擇器（所有瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。）

類選擇器根據(jù)類名來選擇，前面以”.”來標志，是以一獨立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名，換句話說需要保證類名在html標記中存在。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>類選擇器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #2DC4CB;
 }
 
 </style>
 </head>
 <body>
 <div class="demo">類選擇器</div>
 </body>
</html>

效果圖：

3.元素選擇器（所有瀏覽器支持）
元素選擇器（標簽名選擇器），是css3選擇器中最常見而且最基本的選擇器。元素選擇器其實就是文檔的元素，如html,body,p,div等等下下面例子中選擇了span元素，并設(shè)置了字體顏色為紅色。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>元素選擇器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 }
 span{
 color: red;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <p>這里使用<span>元素選擇器</span>改變了樣式</p>
 </div>
 </body>
</html>

效果圖：

4.ID選擇器（所有瀏覽器都支持）

ID選擇器和上面說的類選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加注ID名稱，這樣在樣式選擇器中才能找到相對應(yīng)的元素，不同的是ID選擇器是一個頁面中唯一的值，我們在類使用時是在相對應(yīng)的類名前加上一個“.”號（.className）而id選擇器是在名稱前使用"#"如(#demo)。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ID選擇器</title>
 <style>
 #demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #FF0000;
 }
 
 </style>
 </head>
 <body>
 <div id="demo">ID選擇器</div>
 </body>
</html>

效果圖：

ID選擇器有幾個地方需要特別注意：

第一：一個文檔中一個id選擇器只充許使用一次，因為id在頁面中是唯一的；

第二，id選擇器不能像類選擇器一樣多個合并使用，一個元素只能命名一個id名；

第三，可以在不同的文檔中使用相同的id名，比如說在“test.html”中給h1定了“＃important”,也可給“test1.html”中定義p的id為"#important"，但前提是不管在test.html還是test1.html中只充許有一個id叫"#important"的存在。

5.群組選擇器（所有瀏覽器都支持）

當幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔。群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開，這個逗號告訴瀏覽器，規(guī)則中包含多個不同的選擇器，如果不有這個逗號，那么所表達的意就完全不同了，省去逗號就成了我們前面所說的后代選擇器，這一點大家在使用中千萬要小心加小心。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>群組選擇器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #FF0000;
 }
 p,li{
 color: blue;
 }
 .demo1,.demo2{
 color: #fff;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <p>這里是一個段落!</p>
 <ul><li>列表</li></ul>
 <a href="#" class="demo1">鏈接一</a><br>
 <span class="demo2">文字文字！</span>
 </div>
 </body>
</html>

效果圖：

以上就是什么是css選擇器？css3中5種常見的基本選擇器（代碼實例）的詳細內(nèi)容，更多請關(guān)注我！！！

作者：程序猿的生活
鏈接：https://zhuanlan.zhihu.com/p/152153067

在線咨詢

上一篇：javascript中的鍵盤抬起事件onkeyup實現(xiàn)文本域的輸入字數(shù)控制
下一篇：在網(wǎng)頁開發(fā)中，我們需要掌握的常用HTML標簽有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Javascript：簡單易懂的，復(fù)選框聯(lián)動全選，很實用！

您的項目需求