Если кому то понадобиться, сделал, не знаю по "фен-шую" ли, но как то так
var checkboxMemberView=$('.society_member_block_1 span.niceCheck');
var checkboxMemberAdd=$('.society_member_block_2 > div > div > div > span');
var checkboxSub=$('.society_subscriber > div > div > div > span');
var checkboxGuest=$('.society_not_member > div > div > div > span');
checkboxMemberView.live('click', function(){
$(this).each(function(){
var eqEl=checkboxMemberView.index($(this));
console.log(eqEl);
if($(this).find('input').is(':checked')){
checkboxMemberAdd.eq(eqEl).removeAttr('class').css("background-position","0 0").attr('class','niceCheck');
checkboxSub.eq(eqEl).removeAttr('class').css("background-position","0 0").attr('class','niceCheck');
}else{
checkboxMemberAdd.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis');
checkboxMemberAdd.eq(eqEl).find('input').removeAttr('checked').val(0);
checkboxSub.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis');
checkboxSub.eq(eqEl).find('input').removeAttr('checked').val(0);
checkboxGuest.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis');
checkboxGuest.eq(eqEl).find('input').removeAttr('checked').val(0);
}
})
})
checkboxSub.live('click', function(){
$(this).each(function(){
var eqEl=checkboxSub.index($(this));
console.log(eqEl);
if($(this).find('input').is(':checked')){
checkboxGuest.eq(eqEl).removeAttr('class').css("background-position","0 0").attr('class','niceCheck');
}else{
checkboxGuest.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis');
checkboxGuest.eq(eqEl).find('input').removeAttr('checked').val(0);
}
})
})
|
Цитата:
|
Цитата:
|
Цитата:
Ты мой пример выше смотрел? |
Цитата:
|
angek,
Ежли без оптимизации и то можно и с закрытыми span <!DOCTYPE HTML>
<html>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="fergie" />
<title>Сообщество создать</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style> /*Новый класс для установки отобр. галки на span*/
.niceCheck.checked{
background-position:0 -13px;
}
</style>
<script>
(function (){
$(document).ready(function(){
//Установка/cнятие класса у span.niceCheck и checked в checkbox;
function set_unsetChecked(elem,val){
var checkbox = elem.find('input[type="checkbox"]');
if(val){
checkbox.attr('checked',true);elem.addClass('checked');//alert(elem.attr('class'))
} else {checkbox.removeAttr('checked');elem.removeClass('checked');}
}
//Cкрытие/показ полей отмеченных checkbox;
function setUnlock(wrpClass){//alert('wrpClass='+wrpClass)
var st=+wrpClass[1].slice(6);
if(st!=1){ //Исключаем влияние "Открыть доступ к добавлению:"
st++; if(st>wrpDivL) return;
for(var i=st;i<wrpDivL;i++){
if(!wrpClass[3]){$('div.'+wrpClass[2]+'.prior_'+i).hide();continue;}
var prevCheck = $('div.'+wrpClass[2]+'.prior_'+(i-1)+':visible'); //Виден ли предыдущий соответствующий чекбокс ?
if(i==2)prevCheck = $('div.'+wrpClass[2]+'.prior_0:visible'); //Исключаем влияние "Открыть доступ к добавлению:"
var Check = !!prevCheck.find('span.niceCheck input[type="checkbox"]').attr('checked'); //Включен ли предыдущий соответствующий чекбокс ?
if(prevCheck.length&&Check)$('div.'+wrpClass[2]+'.prior_'+i).show();
}
}
}
//Установка классов в div.checkbox_1, согласно установочным приоритетам;
var CheckArray = $('div.thefield_8 span.niceCheck input[type="checkbox"]');
var Leng = $('div.thefield_8:first span.niceCheck input[type="checkbox"]').length;
var wrpDivL;
CheckArray.each(function(ind){
CheckClassIndex ='prior_'+parseInt(ind/Leng)+ ' check-' + (ind % Leng);
$(this).parents('div.checkbox_1').addClass(CheckClassIndex)
wrpDivL = parseInt(ind/Leng)+1;
});
//Установка исходного отображения страницы, согласно чекбоксам
(function (){
var arrcheck = $('div.checkbox_1 span.niceCheck input[type="checkbox"]');
var arrLng = arrcheck.length;
for(var i=0;i<arrLng;i++){//alert(i)
var elem =$('.checkbox_1.prior_'+parseInt(i/Leng)+'.check-'+(i % Leng)).find('span.niceCheck input[type="checkbox"]');
var val = !!elem.attr('checked');
if(val)elem.parent().addClass('checked');
var wrpClass =['checkbox_1','prior_'+parseInt(i/Leng),'check-'+(i % Leng),val];
setUnlock(wrpClass);
}
})();
//Onclick по span.niceCheck;
$('span.niceCheck').on('click',function(){//alert('span.niceCheck');
var val=true;if($(this).hasClass('checked'))val=false;
set_unsetChecked($(this),val); //Устанавливаем галки и checked/(none checked) в checkbox;
var wrpClass = $(this).parents('.checkbox_1').attr('class').split(/\s+/g);
wrpClass.push(val);setUnlock(wrpClass); //Устанавливаем видимость последующих чекбоксов;
return false;
});
});
})();
</script>
</head>
<body >
<div class="main novosti">
<h2>Создание сообщества</h2>
<div class="create_society">
<input type="text" placeholder="Название"/>
<div class="fieldwrapper_16">
<label>Добавить аватар:</label>
<div class="thefield_17">
<input type="file" class="file_input" size="83" />
<div class="mask">
<input type="text" class="file_input_text" placeholder="Выбрать фотографию"/>
</div>
</div>
</div>
<div class="society_avatar_choose"><img src="img/society_logo.png" width="120" height="120" /> <a class="society_delete_avatar"></a> </div>
<textarea placeholder="Описание сообщества"></textarea>
<div class="society_unit_top">
<h4>Участник сообщества</h4>
<div class="society_member_block_1">
<div class="fieldwrapper_7">
<label>Открыть доступ к просмотру:</label>
<div class="thefield_8">
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" checked="checked"/>
</span>Пост</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" checked="checked"/>
</span>Фотографии</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" />
</span>Видеозаписи</div>
</div>
</div>
</div>
<div class="society_member_block_2">
<div class="fieldwrapper_7">
<label>Открыть доступ к добавлению:</label>
<div class="thefield_8">
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" checked="checked"/>
</span>Пост</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" checked="checked"/>
</span>Фотографии</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" />
</span>Видеозаписи</div>
</div>
</div>
</div>
</div>
<div class="society_unit">
<div class="society_subscriber">
<h4>Подписчик</h4>
<div class="fieldwrapper_7">
<label>Открыть доступ к просмотру:</label>
<div class="thefield_8">
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" checked="checked"/>
</span>Пост</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" checked="checked"/>
</span>Фотографии</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" />
</span>Видеозаписи</div>
</div>
</div>
</div>
<div class="society_not_member">
<h4>Пользователь не состоящий в сообществе</h4>
<div class="fieldwrapper_7">
<label>Открыть доступ к просмотру:</label>
<div class="thefield_8">
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox"/>
</span>Пост</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox"/>
</span>Фотографии</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" />
</span>Видеозаписи</div>
</div>
</div>
</div>
</div>
<a href="#" class="btn_society">Создать</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>
Текущие скрипты пока убрал (*Галки с Пользователь не состоящий в сообществе лучше изначально снять(что и сделал |
Цитата:
|
| Часовой пояс GMT +3, время: 11:07. |