Форум

angek · #11 (**permalink**) 27.02.2013, 14:20

Если кому то понадобиться, сделал, не знаю по "фен-шую" ли, но как то так

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);
    }
  })
})

ksa · #12 (**permalink**) 27.02.2013, 14:23

Сообщение от angek

не знаю по "фен-шую" ли

Жуть какая-то...

angek · #13 (**permalink**) 27.02.2013, 14:26

Сообщение от ksa

Жуть какая-то...

Дело в том что клик не на чекбокс, а на спан(так уж сверстал верстальщик), в этом и была проблема.

ksa · #14 (**permalink**) 27.02.2013, 14:29

Сообщение от angek

Дело в том что клик не на чекбокс, а на спан(так уж сверстал верстальщик)

Ну и в чем принципиальная разница?

Ты мой пример выше смотрел?

angek · #15 (**permalink**) 27.02.2013, 14:38

Сообщение от ksa

Ну и в чем принципиальная разница?

Ты мой пример выше смотрел?

Я его увидел когда уже сделал так как есть

Deff · #16 (**permalink**) 27.02.2013, 15:19

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>

Текущие скрипты пока убрал
(*Галки с Пользователь не состоящий в сообществе лучше изначально снять(что и сделал

angek · #17 (**permalink**) 27.02.2013, 16:22

Сообщение от Deff

angek,
Ежли без оптимизации и то можно и с закрытыми span

Спасибо за помощь.

Форум

Справочник

Discord чат

Курсы javascript