Shulou(Shulou.com)06/01 Report--

This article editor for you a detailed introduction of the "HTML radio and multi-select button how to add style to the picture", detailed content, clear steps, details handled properly, I hope that this "HTML radio and multi-select button how to add style to the picture" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

The code is as follows:

$(function () {)

$("input [type = 'checkbox']") .click (function () {

If ($(this) .is (': checked')) {

$(this) .attr ("checked", "checked")

$(this) .parent () .removeClass ("c_off") .addClass ("c_on")

} else {

$(this) .removeAttr ("checked")

$(this) .parent () .removeClass ("c_on") .addClass ("c_off")

}

})

$("input [type = 'radio']") .click (function () {

$("input [type = 'radio']") .removeAttr ("checked")

$(this) .attr ("checked", "checked")

$(this). Parent (). RemoveClass ("r_off"). AddClass ("r_on"). Siblings (). RemoveClass ("r_on"). AddClass ("r_off")

})

})

/ * multiple selection / single selection * /

Label {

Display:block

Cursor:pointer

Line-height:26px

Margin-bottom:20px

Width:26px

Height:26px

Line-height:26px

Float:left

Margin-top:6px

}

.radios {

Padding-top:18px

Border-top:1pxsolid#049CDB

}

.label _ checkinput,.label_radioinput {

Margin-right:5px

}

.lblby.label _ check,.lblby.label_radio {

Margin-right:8px

}

.lblby.label _ radio,.lblby.label_check {

Background:url (.. / images/jxc_btn.png) no-repeat

}

.lblby.label _ check {

Background-position:00px

}

.lblbylabel.c _ on {

Background-position:0-26px

}

.lblby.label _ radio {

Background-position:0-52px

}

.lblbylabel.r _ on {

Background-position:0-78px

}

.lblby.label _ checkinput,.lblby.label_radioinput {

Position:absolute

Left:-9999px

}

Checkbox1

Checkbox2

Radio1

Radio2

Radio3

Read this, the "HTML radio and multi-select buttons how to add style to the picture" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.