Передача значения с текстового поля в чекбокс
Доброго времени суток вам. Помогите пожалуйста новичку в Javascript...
В общем задача очень интересная , мне что то не под силу это всё решить. Здесь какбы всё понятно
<script type="text/javascript">
$(document).ready(function(){
$('#valGo').click(function(){
$('#ispen').attr('checked',false);
$('#ldF21').val('5');
$('#ldF22').val('2');
var datef = new Date();
$('#mdF8 option').attr('style','').filter(function(){return $(this).html()==datef.getFullYear()}).attr('selected','true').attr('style','background:#EEEEEE');
$('#mdF9 option').attr('style','').filter(function(){return $(this).val()==datef.getMonth()+1}).attr('selected','true').attr('style','background:#EEEEEE');
$('#mdF10 option').attr('style','').filter(function(){return $(this).val()==datef.getDate()}).attr('selected','true').attr('style','background:#EEEEEE');
});
});
</script>
Но вот с этим не получается... Есть чекбоксы и текстовое поле с кнопкой , никак не могу прикрутить чтоб в зависимости от содержания текстового поля(ключа) выбирался нужный чекбокс. Приблизительный пример <input type="checkbox" name="ocat" id="cus1" value="1" ><b>Боевик</b><br> <input type="checkbox" name="ocat" id="cus2" value="2" ><b>Ужасы</b><br> <input type="checkbox" name="ocat" id="cus3" value="3" ><b>Фантастика</b><br> <input type="checkbox" name="ocat" id="cus4" value="4" ><b>Мелодрама</b><br> <input type="checkbox" name="ocat" id="cus5" value="5" ><b>Триллер</b> <br><br> <input type="text" id="ldF12" class="nex-click-left" size="35" style="width:50%;" name="aname" maxlength="35" value="вставте сюда текст ниже" /> <input type="button" value="Выбрать нужный чекбокс" id="valGo"> <br> Боевик <br> Ужасы <br> Фантастика <br> Мелодрама <br> Триллер <br> Помогите пожалуйста новичку |
Corey,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
$('#ldF12').on('input', function () {
var text = $.trim(this.value);
text && $('b:contains("' + text + '")').prev().prop('checked', true)
})
});
</script>
</head>
<body>
<input type="checkbox" name="ocat" id="cus1" value="1" ><b>Боевик</b><br>
<input type="checkbox" name="ocat" id="cus2" value="2" ><b>Ужасы</b><br>
<input type="checkbox" name="ocat" id="cus3" value="3" ><b>Фантастика</b><br>
<input type="checkbox" name="ocat" id="cus4" value="4" ><b>Мелодрама</b><br>
<input type="checkbox" name="ocat" id="cus5" value="5" ><b>Триллер</b>
<br><br>
<input type="text" id="ldF12" class="nex-click-left" size="35" style="width:50%;" name="aname" maxlength="35" value="вставте сюда текст ниже" />
<br>
Боевик
<br>
Ужасы
<br>
Фантастика
<br>
Мелодрама
<br>
Триллер
<br>
</body>
</html>
|
рони, спасибо большое что ответил и как всегда , всё чётко и ясно работает.
Только начал прикручивать скрипт с ПРИМЕРА и сразу же понял что немного с ним перемудрил (с примером). Я дал пример с всякими там id`шками в общем простой вариант не догадался что столкнусь с достаточно "привередливой" структурой. Суть в том что я НЕ КАК не могу прикрутить выборку с этой части кода к моему.
$(function () {
$('#ldF12').on('input', function () {
var text = $.trim(this.value);
text && *!*$('b:contains("' + text + '")').prev().prop('checked', true)
})*/!*
});
В примере : я так понял , что. Делаем тру чекбоксу , который идёт непосредственно перед тегом <b> и его содержимое там куда то используем переменную с переменной.... в общем дальше не понимаю...:-E сорри за "JS безграмотность" У меня структура не много другая , там как видно из примера , приведённый ниже. input type="text" идёт перед <label> и обернуто это всё счастье в <div> ... Как оказалось выбрать для меня достаточно сложная задача. Пробовал всё что хочешь , всеми методами которые знаю. А потом проскочила мысль , в правильном ли я направлении копаю , а если не в этом дело , или в чём нибудь другом? В общем у меня полная неразбериха в голове с достаточно коротеньким кодом. Помоги пожалуйста разобраться. :help: П.С. это часть кода формы добавления материала на ucoz <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
$('#ldF12').on('input', function () {
var text = $.trim(this.value);
text && $('b:contains("' + text + '")').prev().prop('checked', true)
})
});
</script>
</head> <body> <div class="u-combolist" id="uCatsMenu9" style="height:200px;overflow:auto;padding:2px;"> <div style="padding:1px"> <b>ОНЛАЙН ФИЛЬМЫ</b> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus10" value="10" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus10">Сериал</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus3" value="3" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus3">Боевик</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus4" value="4" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus4">Ужасы</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus5" value="5" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus5">Фантастика</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus6" value="6" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus6">Мистика</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus7" value="7" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus7">Мелодрама</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus8" value="8" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus8">Детский</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus9" value="9" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus9">Исторический</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus11" value="11" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus11">Приключения</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus12" value="12" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus12">Триллер</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus13" value="13" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus13">Фэнтези</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus14" value="14" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus14">Документальный</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus15" value="15" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus15">Семейный</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus16" value="16" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus16">Комедия</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus17" value="17" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus17">ТВ-передача</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus18" value="18" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus18">Короткометражный</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus19" value="19" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus19">Детектив</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus20" value="20" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus20">Музыкальный</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus21" value="21" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus21">Мультфильм</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus22" value="22" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus22">Индийский</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus23" value="23" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus23">Трейлер</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus24" value="24" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus24">+САУНДТРЕК</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus25" value="25" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus25">Интересное видео</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus26" value="26" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus26">Драма</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus27" value="27" onclick="insertselcat();" checked=""/> <label style="vertical-align:middle;" for="cus27">Спорт</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus28" value="28" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus28">На добовление</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus30" value="30" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus30">Постер-Шапка</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus33" value="33" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus33">2011</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus32" value="32" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus32">2012</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus29" value="29" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus29">2013</label> </div> <div> <input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus31" value="31" onclick="insertselcat();"/> <label style="vertical-align:middle;" for="cus31">2014</label> </div> </div> </div> <input type="text" id="ldF12" class="nex-click-left" size="35" style="width:100%;" name="aname" maxlength="35" /> </body> </html> |
Corey,
'b:contains поменяй на label:contains
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
$('#ldF12').on('input', function () {
var text = $.trim(this.value);
text && $('label:contains("' + text + '")').prev().prop('checked', true)
})
});
</script>
</head>
<body>
<div>
<input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus10" value="10" onclick="insertselcat();"/>
<label style="vertical-align:middle;" for="cus10">Сериал</label>
</div>
<div>
<input style="padding:0;margin:0;height:16px;width:16px;vertical-align:middle;" type="checkbox" name="ocat" id="cus3" value="3" onclick="insertselcat();"/>
<label style="vertical-align:middle;" for="cus3">Боевик</label>
</div
<br><br>
<input type="text" id="ldF12" class="nex-click-left" size="35" style="width:50%;" name="aname" maxlength="35" value="вставте сюда текст ниже" />
<br>
Боевик
<br>
Сериал
<br>
Фантастика
<br>
Мелодрама
<br>
Триллер
<br>
|
рони , b:contains менял на label:contains и не чего....
Мне очень , очень , стыдно но я только что нашёл ответ :-E Он скрывался не в селекторах там их функциях а в элементарной моей нупской внимательности...:( Я заменил $('label:contains( на $('#uCatsMenu9 label:contains( и всё пошло... Извини что задолбал тебя. Спосибо большое , при большое , человеческое спасибо! |
Плюсовать ща не могу по позже +ну
П.С. Спосибо за помощ :thanks: :thanks: :thanks: и терпение :) |
| Часовой пояс GMT +3, время: 12:51. |