隨著現代瀏覽器的流行，純css設定checkbox也變的很是實用，下面會講到5種與眾不同的checkbox核取方塊。
首先，需要新增一段css隱藏所有的checkbox核取方塊，下面我們會改變它的外觀。要做到點需要新增一段**到你的css檔案中。
/**checkbox核取方塊樣式一隱藏掉所有的checkbox核取方塊後，我們需要新增乙個* 隱藏預設的checkbox
*/input[type=checkbox]
labelhtml元素，我們都知道，當點選的有for屬性的label標籤時，對應的checkbox核取方塊會被選中。這意味著，我們可以通過label的點選事件來處理我們的checkbox核取方塊。
此核取方塊風格就像乙個解鎖滑塊，滑塊選中和未選中狀態會顯示在的不同位置。當單擊滑塊按鈕（label標籤），將會選中核取方塊，然後滑塊移動到on位置。
我們開始建立核取方塊區的html。
為這個樣式的核取方塊，乙個label不足以完成任務，我們用乙個div元素包含checkbox，我們需要使用它們來做黑色條帶和圓角。
/** * create the slider bar */.checkboxone現在，我們可以把label作為條帶上的滑塊，我們希望按鈕效果是從條帶的一側移動到另一側，我們可以新增label的過渡。
.checkboxone label現在這個滑塊在選中（關閉）位置，當我們選中核取方塊，我們希望有乙個反應發生，所以我們可以移動滑塊到另一端。我們需要知道，判斷核取方塊被選中，如果是則改變label元素的left屬性。
.checkboxone input[type=checkbox]:checked + label這就是你需要的第乙個checkbox核取方塊的css。
此核取方塊風格像樣式一樣，但不同的是，這個滑塊按鈕會改變顏色。當您單擊滑塊按鈕，它移動到條帶的另一邊，並改變按鈕的顏色。
html**和樣式一是完全一樣的。
這個div會變成比樣式一大一些的條帶，label依然是作為滑塊，使用下面的css來定義它。.checkboxtwo這個樣式中間有乙個黑色的條，滑塊會沿著它左右滑動，但是div元素已經使用了，所以我們需要用
:before偽類建立乙個新的元素。
.checkboxtwo:before和樣式一一樣，接下來我們為label寫css樣式，把它用作滑塊。
.checkboxtwo label我要實現和樣式一差不多的選中狀態，當選中時改變label的left和background屬性。
這個核取方塊的樣式比樣式二更複雜一些，它和前面的例子一樣會左右滑動，並且當改變選中和未選中的狀態時，滑塊滑動到另一側並且在原位置顯示對應的文字。
首先，我們寫html**，這和前面是相同的。
然後，我們用相同的方式把div作為滑塊，下面的**會建立乙個黑色圓角的條帶，我們可以把滑塊和文字放到裡面。
.checkboxthree當滑塊處於未選中狀態時，滑塊會在左側，並且右邊顯示」off」，當點選的時候，滑塊移動到右側，左側顯示」on」。
但是元素數量不足以讓我們實現這些功能，所以我們要用:before和:after兩個偽類建立兩個元素，分別放置」on」和」off」。
/** * 建立on */.checkboxthree:before和前面一樣，我們來新增滑塊的樣式，當被點選時它會移動到另一側，並且改變顏色。/** * 建立off */.checkboxthree:after
在這個樣式中，我們會建立兩個圓形，當點選時改變裡面的圓形的顏色表示選中與未選中的狀態。
和前面一樣的html**。
接下來我們要為checkbox建立外面的圓形，使用css的
border-radius屬性，並且設定為100%就可以建立乙個正圓形。
.checkboxfour然後我們用label元素來建立乙個小一點的圓形，它會根據checkbox狀態來改變顏色。
.checkboxfour label當核取方塊被選中的時候，我們要改變內圈的背景顏色來表示選中狀態。
這個核取方塊的樣式有些不同，它看起來只是比瀏覽器預設的checkbox樣式稍微好了些，但是不同的是我們可以根據自己的需要來定義它的樣式了。
首先還是一樣的html**
在前面的例子中，我們把div作為checkbox的滑動條帶或者外部的圓圈，但是這一次我們不需要了，可以使用div元素來設定核取方塊的區域。.checkboxfivelabel標籤用於click事件和我們要定義的核取方塊的方框樣式。
.checkboxfive label接下來，我們要建立方框中的對勾，對於這一點，我們可以使用:after偽類建立乙個新的元素，為了實現這個樣式，我們可以建立乙個5px x 9px的長方形並給他加上邊框。這時候我們去掉上面和右邊的邊框之後，它會看起來像乙個字母l。然後我們可以使用css的transform屬性讓它旋轉一下，這樣看起來就像是乙個對勾。
.checkboxfive label:after在上面的css中，我們已經設定它的透明度為0.2，所以你會看到的核取方塊有乙個半透明的對勾。你可以在懸停的時候加深一點，在選中時，可以把設定為不透明。
.checkboxfive label:hover::after .checkboxfive input[type=checkbox]:checked + label:after
核取方塊checkbox樣式修改
該方法只相容ie9及以上 將checkbox和label關聯起來，將checkbox隱藏掉，通過點選label來點選checkbox，label的樣式即可自定義。通過checkbox checked label after來控制點選之後的符號 通常我們使用以下html結構，我們給核取方塊定義id c...
MFC中核取方塊 checkbox
來自 http blog.csdn.net dongzhongshu archive 2010 06 30 5705138.aspx checkbox是一種特殊的按鈕 得到核取方塊狀態的函式 cbutton pbtn cbutton getdlgitem idc check int state pb...
jquery操作核取方塊checkbox
jquery判斷checked的三種方法 attr checked 看版本1.6 返回 checked 或 undefined 1.5 返回 true或false prop checked 16 true fals is checked 所有版本 true false，別忘記冒號哦 jquery賦值...