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>
Текущие скрипты пока убрал
(*Галки с
Пользователь не состоящий в сообществе лучше изначально снять(что и сделал