JSFiddle - React, Tailwind, and code Playground
by iLight
HTML
<div></div>
<input class="ch1" type='checkbox' /> Мой чекбокс
<span></span>
<input class="ch1" type='checkbox' /> Еще чекбокс
<div></div>
<div>
<input class="ch2" type='checkbox' /> Мой чекбокс ch2
</div>
<span></span>
<div>
<input class="ch2" type='checkbox' /> Еще чекбокс ch2
</div>
JavaScript
function css3CheckBox(options){
var defaultOpt = {
name: '.css3checkbox',
position : 'inLabel',
content: 'self'
};
//var controller = true;
var newOpt = $.extend(defaultOpt, options);
var checkbox = newOpt.name;
var lastID = 0;
var newID;
if( $('[data-cssid]').size() > 0 ){
lastID = parseInt($('[data-cssid]').last().attr('data-cssid'));
}
newID = lastID + 1;
console.log(1, newOpt.content, newOpt.name)
if(newOpt.position=='inLabel'){
$(checkbox).each(function(){
var ithis = $(this);
if( void 0 === ithis.attr('id') ){
ithis.attr('id', 'css3id'+newID).attr('data-cssid', newID).addClass('css3checkbox');
newID++;
}
var parentLabel = ithis.parent();
if( parentLabel.get(0).tagName != 'LABEL' ){
var html = ithis.html();
var idval = 'css3id'+(newID-1);
if(newOpt.content == "all"){
var html = ithis.parent().html();
console.log(parentLabel);
ithis.parent().html('<label id = "' +idval+ 'l" for = "' +idval+ '">' +html+ '</label>');
console.log(111);
}else{
console.log(222);
var selectLabel = '#'+idval+ 'l';
ithis.after( '<label id = "' +idval+ 'l" for = "' +idval+ '">');
$(selectLabel).append(ithis);
}
}
});
}
if(newOpt.position=='afterLabel'){
$(checkbox).each(function(){
var ithis = $(this);
var idhref = ithis.attr('id');
...