Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.06.2014, 18:21
Новичок на форуме
Отправить личное сообщение для ilyakor Посмотреть профиль Найти все сообщения от ilyakor
 
Регистрация: 10.06.2014
Сообщений: 4

Активация checkbox при нажатии на текст и изменение стиля у текста.
Есть список, при наведении на элемент списка, слева появляется checkbox, при нажатии на него он естественно активируется и мой текст зачёркивается и обратно. Необходимо чтобы при нажатии на текст происходило всё тоже самое, то есть активировался checkbox и зачёркивался текст, а при повторном нажатии на текст деактивировался checkbox и убиралось свойство line-through. Прикладываю ссылку на http://jsfiddle.net/56xMX/ и файл с архивом, помогите пожалуйста разобраться, или натолкните.
Вложения:
Тип файла: zip esdpo.zip (5.3 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 10.06.2014, 18:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,187

ilyakor,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">*{margin:0;padding:0}
  body{width:100%;height:100%;color:#000;min-width:1005px;font:300 100.01% 'Open Sans',sans-serif;padding:42px 0 0 0;background:#f3cf53;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;position:relative}
  ::selection{background:#000;color:#fff}
  a{color:#121011;display:inline-block;position:relative;text-decoration:none}
  a:after{content:"";display:block;width:100%;position:absolute;height:1px;background:#121011;bottom:0;left:0}
  a:hover{color:#e9b810}
  a:hover:after{background:#e9b810}
  p{font-size:1.25em}
  h1,h2,h3,h4,strong{font-weight:800}
  h1{font-size:3.125em;line-height:50px}
  h2{font-size:2.1875em;line-height:35px}
  h3{font-size:1.6666666666666667em;line-height:25px}
  h4{font-size:1.125em;line-height:18px}
  ul{list-style:none}
  .left{float:left}
  .right{float:right}
  .wrapper{width:845px;margin:0 auto}
  .clr{clear:both;overflow:hidden;height:0}
  #documents{margin-bottom:60px}
  #documents .info{font-size:14px;line-height:36px}
  #documents>p{font-size:0.875em;line-height:16px;padding:2px 0}
  #documents ul{margin:22px 0 0 -14px;line-style:none}
  #documents ul li{padding:5px 15px;position:relative;cursor:pointer;display:block}
  #documents ul li.active input,#documents ul li:hover input{display:block}
  #documents ul li.active h4{text-decoration:line-through}
  #documents ul li span{display:inline-block;padding:5px;margin:-5px}
  #documents ul li h4{line-height:22px;display:inline-block}
  #documents ul li p{font-size:0.875em;display:inline-block;line-height:16px}
  #contacts h2{color:#fff;font-size:35px;line-height:35px;margin:0 0 18px 0}
  #chk1,#chk2,#chk3,#chk4,#chk5,#chk6,#chk7,#chk8,#chk9,#chk10,#chk11{display:none;position:absolute;margin:5px 5px 5px -20px}
  .arrow_box{position:absolute;background:#F3CF53;border:6px solid #000000;top:48px;right:128px;padding:5px 5px 5px 5px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-align:center}
  .arrow_box:after,.arrow_box:before{right:98%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}
  .arrow_box:after{border-right-color:#F3CF53;border:29.5px;margin-top:-29.5px}
  .arrow_box:before{border-right-color:#000;border:38px;margin-top:-38px;-webkit-border-radius:20px;-moz-border-radius:15px;border-radius:15px}
  </style>
</head>

<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
	$(document).ready(function()
	  {
	    $("#documents").on('click', 'li', function(event)
	      {
	        $this = $(this);
	        if(event.target.tagName == "INPUT") $this.toggleClass('active');
	        $this.find('input').prop('checked', $this.hasClass('active'));
	      }
	    )
	  }
	);
</script>
<div id="documents" class="wrapper">
			<h2>ДОКУМЕНТЫ</h2>
			<p>которые необходимо иметь на проверке знаний в комиссии</p>
			<ul>
			    <li>
			    	<input type="checkbox" id="chk1" />
			    	<label for="chk1">
			    		<span><h4>Паспорт</h4></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk2" />
			    	<label for="chk2">
			    		<span><h4>Выписка из&nbsp;приказа о&nbsp;назначении на&nbsp;должность</h4><br>
						<p>необходимо, чтобы должность соответствовала «Единому тарифно-квалификационному справочнику»</p></span>
					</label>
			    </li>
			   	<li>
			    	<input type="checkbox" id="chk3" />
			    	<label for="chk3">
			    		<span><h4>Удостоверение, подтверждающее наличие группы по&nbsp;электробезопасности</h4><br>
						<p>или выписку из&nbsp;журнала проверки знаний с&nbsp;прежнего места работы, заверенную отделом кадров (для вновь принятых<br>на&nbsp;работу)</p></span>
			    	</label>
			    </li>
				<li>
			    	<input type="checkbox" id="chk4" />
			    	<label for="chk4">
			    		<span><h4>Письмо-направление</h4><br>
						<p>с&nbsp;указанием, в&nbsp;качестве кого будет использоваться данный специалист, за&nbsp;подписью руководителя предприятия</p></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk5" />
			    	<label for="chk5">
			    		<span><h4>Медицинскую справку с&nbsp;допуском к&nbsp;работе в&nbsp;действующих<br>электроустановках</h4><br>
						<p>в&nbsp;справке должно быть написано: «Допущен к&nbsp;работе в&nbsp;действующих электроустановках»</p></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk6" />
			    	<label for="chk6">
			    		<span><h4>Должностная инструкция</h4></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk7" />
			    	<label for="chk7">
			    		<span><h4>Однолинейная схема электрохозяйства предприятия</h4></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk8" />
			    	<label for="chk8">
			    		<span><h4>Договор на&nbsp;электроснабжение</h4></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk9" />
			    	<label for="chk9">
			    		<span><h4>Договор аренды</h4><br>
							<p>если помещение арендуется</p></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk10" />
			    	<label for="chk10">
			    		<span><h4>Журнал проверки знаний персонала предприятия</h4></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk11" />
			    	<label for="chk11">
			    		<span><h4>Протоколы испытаний оборудования предприятия</h4></span>
			    	</label>
			    </li>
		  	</ul>
			<div class="info"><i>При проверке знаний персонала обязан присутствовать энергетик (лицо, ответственное за электрохозяйство)</i></div><br/>
		</div>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2014, 19:34
Новичок на форуме
Отправить личное сообщение для ilyakor Посмотреть профиль Найти все сообщения от ilyakor
 
Регистрация: 10.06.2014
Сообщений: 4

Спасибо огромное, очень помогли!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
движение текста при нажатии кнопки jquery imediasun1 Элементы интерфейса 10 31.01.2014 09:55
при нажатии на раздел меню поворачивается маркер Сергей545 Элементы интерфейса 5 08.12.2013 21:15
Отображение текста при нажатии irbis_triffle Элементы интерфейса 7 25.07.2012 14:35
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 07:55
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 13:36