Переключение значений select в зависимости от значения класса div
Здравствуйте, затрудняюсь реализовать сам. Прошу вашей помощи.
Есть два блока div: <li id="flag1" class="btn"> <div class="iradio checked"></div> </li> <li id="flag2" class="btn"> <div class="iradio"></div> </li> в которых попеременно происходит обмен значений классов div: .iradio.checked и .iradio Нужно как то отслеживать этот обмен классами и скриптом присваивать значение полю select - Стандарт или Информ. Код меню ниже:
<select class='k_select' id='k_input_field_30_4700' value='Стандарт' >
<option value=''></option>
<option selected value='Стандарт'>Стандарт</option>
<option value='Информ'>Информ</option>
</select>
|
Цитата:
|
Это ссылка на скрипт, вставляется в шапку:
<script src='//yagool.ru/blurb/icheck.js'></script> Сам html код:
<li id="flag1" class="btn">
<div class="iradio checked"></div>
</li>
<li id="flag2" class="btn">
<div class="iradio"></div>
</li>
<select class='k_select' id='k_input_field_30_4700' value='Стандарт' >
<option value=''></option>
<option selected value='Стандарт'>Стандарт</option>
<option value='Информ'>Информ</option>
</select>
Скрипт обработчик:
<script>$(document).ready(function(){$(".pricePlans input").each(function(){var a=$(this),b=a.next(),c=b.text();b.remove();a.iCheck({radioClass:"iradio",insert:'<div class="icheck-icon"></div>'+c})})});</script>
|
golopogos,
пока информации нуль - если вы используите плагин https://github.com/fronteed/iCheck - читайте документацию там всё есть -- а пока вы демонстрируите куски кода никак несвязанные с друг другом -- сделайте макет тут или в песочнице. |
Ну а если откинуть все скрипты и т.д. И взять за основу первый пост?..
|
golopogos,
так сам там класс то появится то исчезнет? |
golopogos,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://fronteed.com/iCheck/icheck.js?v=1.0.1"></script>
<link rel="stylesheet" type="text/css" href="http://fronteed.com/iCheck/demo/css/normalize.css">
<style type="text/css">
/* green */
.iradio_flat-green {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
background: url(http://fronteed.com/iCheck/skins/square/green.png) no-repeat;
border: none;
cursor: pointer;
}
.iradio_flat-green {
background-position: -0px 0;
}
.iradio_flat-green.checked {
background-position: -48px 0;
}
.iradio_flat-green.disabled {
background-position: -132px 0;
cursor: default;
}
.iradio_flat-green.checked.disabled {
background-position: -154px 0;
}
</style>
</head>
<body>
<label for="baz[1]">Стандарт</label>
<input type="radio" name="quux[2]" id="baz[1]" checked data-info="Стандарт">
<label for="baz[2]">Информ</label>
<input type="radio" name="quux[2]" id="baz[2]" data-info="Информ">
<select class='k_select' id='k_input_field_30_4700' value='Стандарт' >
<option value=''></option>
<option selected value='Стандарт'>Стандарт</option>
<option value='Информ'>Информ</option>
</select>
<script>
$('input').iCheck({radioClass: "iradio_flat-green"});
$('input').on('ifChecked', function(event)
{
$('#k_input_field_30_4700').val($(this).data('info'));
}
);
</script>
</body>
</html>
|
|
golopogos,
а где там код из 7 поста? |
Большое Вам спасибо, но представленный Вами код не совсем подходит. И как его приспособить - ума не приложу) Макет на Фидле - это то что необходимо подправить. Выложил для наглядности. Функцию чекбоксов выполняют панели выбора тарифа.
|
golopogos,
1. выбор checked инпутов и selected селекта должны совпадать изначально строки 221 и 251 2. лучше пописать data инпуте чтоб не искать в h2 значение или прописать value в самих инпутах тогда тогда строка 195 будет $('#k_input_field_30_4700').val(this.value); 3. если таких блоков много сами пропишите путь до ближайшего селекта вместо $('#k_input_field_30_4700'). строка 195 4 не грузите jquery несколько раз -- если выбрали в jsfiddle версию -- зачем грузить ещё свою -- также и на сайте одна версия и желательно новее, но это по желанию и работоспособности.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script src="http://fronteed.com/iCheck/icheck.js?v=1.0.1"></script>
<style type='text/css'>
div #plans,div #plans ul,div #plans ul li {
margin: 0;
padding: 0;
list-style: none;
}
div.pricePlans:after {
content: '';
display: table;
clear: both;
}
div.pricePlans {
font-family: 'Open Sans', sans-serif;
zoom: 1;
}
div.pricePlans {
max-width: 600px;
margin: 0 auto;
padding-left: 15px;
}
div.pricePlans #plans .plan {
background: #fff;
float: left;
width: 280px;
text-align: center;
border-radius: 5px;
margin: 0 10px 10px 0;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.planContainer .title h2 {
font-size: 1.8em;
font-weight: 300;
color: #3e4f6a;
margin: 0;
padding: .4em 0;
}
.planContainer .title h2.bestPlanTitle {
background: #3e4f6a;
background: -webkit-linear-gradient(top, #475975, #364761);
background: -moz-linear-gradient(top, #475975, #364761);
background: -o-linear-gradient(top, #475975, #364761);
background: -ms-linear-gradient(top, #475975, #364761);
background: linear-gradient(top, #475975, #364761);
color: #fff;
border-radius: 5px 5px 0 0;
}
.planContainer .price p {
background: #3e4f6a !important;
background: -webkit-linear-gradient(top, #475975, #364761);
background: -moz-linear-gradient(top, #475975, #364761);
background: -o-linear-gradient(top, #475975, #364761);
background: -ms-linear-gradient(top, #475975, #364761);
background: linear-gradient(top, #475975, #364761);
color: #fff !important;
font-size: 1.2em !important;
font-weight: 700 !important;
height: 2.2em !important;
line-height: 2.0em !important;
width: 257px !important;
margin-left: 0 !important;
padding: 4px;
}
.planContainer .price p.bestPlanPrice {
background: #f7814d !important;
}
.planContainer .price p span {
color: #8394ae !important;
}
.planContainer .options {
margin-top: 4em !important;
}
.planContainer .options li {
font-weight: 700 !important;
color: #364762 !important;
line-height: 2.0em !important;
}
.planContainer .options li span {
font-weight: 600;
font-size: 18px;
color: #a00202;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
line-height: 2.8em;
display: inline-block;
}
.planContainer .btn a {
text-transform: uppercase;
text-decoration: none;
color: #3e4f6a;
font-weight: 700;
letter-spacing: 3px;
line-height: 2.8em;
border: 2px solid #3e4f6a;
display: inline-block;
width: 250px;
height: 2.4em;
border-radius: 4px;
margin: 1.5em 0 1.8em;
}
.planContainer .btn a.bestPlanButton {
color: #fff;
background: #f7814d;
border: 2px solid #f7814d;
}
/* iCheck plugin Line skin, blue
----------------------------------- */
.iradio {
position: relative;
display: block;
width: 80%;
height: 2.8em;
margin: 1.5em 0 1.8em;
text-transform: uppercase;
text-decoration: none;
color: #3e4f6a;
font-weight: 700;
letter-spacing: 3px;
line-height: 2.8em;
display: inline-block;
border: 2px solid #3e4f6a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 4px;
cursor: pointer;
}
.iradio .icheck-icon {
position: absolute;
top: 50%;
left: 13px;
width: 13px;
height: 11px;
margin: -5px 0 0 0;
padding: 0;
overflow: hidden;
}
.iradio.hover {
color: #f7804d;
border: 2px solid #f7804d;
}
.iradio.checked {
background: #f7804d;
color: #ffffff;
border: none;
}
.iradio.checked .icheck-icon {
background-position: -15px 0;
}
.iradio.disabled {
background: #ADD7F0;
cursor: default;
}
.iradio.disabled .icheck-icon {
background-position: -30px 0;
}
.iradio.checked.disabled {
background: #ADD7F0;
}
.iradio.checked.disabled .icheck-icon {
background-position: -45px 0;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function(){$(".pricePlans input").each(function(){var a=$(this),b=a.next(),c=b.text();b.remove();a.iCheck({radioClass:"iradio",insert:''+c})
a.on('ifChecked', function(event)
{
$('#k_input_field_30_4700').val($('h2',$(this).parents('.planContainer')).text());
}
)
})});
});
</script>
</head>
<body>
<div class="pricePlans">
<ul id="plans">
<li class="plan">
<ul class="planContainer">
<li class="title"><h2>Стандарт</h2></li>
<li class="price"><p>3'000 / месяц</p></li>
<li>
<ul class="options">
<li>Добавление в базу <span>+</span></li>
<li>СМС-рассылок <span>0</span></li>
</ul>
</li>
<li id="flag1" class="btn">
<input id="tarif" name="iCheck" type="radio" checked>
<a class="bestPlanButton" href="#"><label>Мой выбор</label></a>
</li>
</ul>
</li>
<li class="plan">
<ul class="planContainer">
<li class="title"><h2 class="bestPlanTitle">Информ</h2></li>
<li class="price"><p class="bestPlanPrice">5'000 / месяц</p></li>
<li>
<ul class="options">
<li>Добавление в базу <span>+</span></li>
<li>СМС-рассылок <span>1</span></li>
</ul>
</li>
<li id="flag2" class="btn">
<input id="tarif" name="iCheck" type="radio" >
<a class="bestPlanButton" href="#"><label>Мой выбор</label></a>
</li>
</ul>
</li>
</ul>
</div>
<select class='k_select' id='k_input_field_30_4700' value='Стандарт' > <!-- Поле после отладки поле будет скрыто -->
<option value=''></option>
<option selected value='Стандарт'>Стандарт</option>
<option value='Информ'>Информ</option>
</select>
</body>
</html>
|
Вы гений!) Спасибо Вам огромное!..
|
| Часовой пояс GMT +3, время: 19:19. |