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>
