Форум

Corey · #1 (**permalink**) 14.01.2014, 00:24

Доброго времени суток вам. Помогите пожалуйста новичку в 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>

Помогите пожалуйста новичку

рони · #2 (**permalink**) 14.01.2014, 01:00

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>

Corey · #3 (**permalink**) 14.01.2014, 22:43

рони, спасибо большое что ответил и как всегда , всё чётко и ясно работает.
Только начал прикручивать скрипт с ПРИМЕРА и сразу же понял что немного с ним перемудрил (с примером).
Я дал пример с всякими там id`шками в общем простой вариант не догадался что столкнусь с достаточно "привередливой" структурой.

Суть в том что я НЕ КАК не могу прикрутить выборку с этой части кода к моему.

$(function () {
      $('#ldF12').on('input', function () {
 var text = $.trim(this.value);
 text && *!*$('b:contains("' + text + '")').prev().prop('checked', true)
      })*/!*
  });

В примере : я так понял , что. Делаем тру чекбоксу , который идёт непосредственно перед тегом <b> и его содержимое там куда то используем переменную с переменной.... в общем дальше не понимаю...

сорри за "JS безграмотность"

У меня структура не много другая , там как видно из примера , приведённый ниже. input type="text" идёт перед <label> и обернуто это всё счастье в <div> ... Как оказалось выбрать для меня достаточно сложная задача. Пробовал всё что хочешь , всеми методами которые знаю. А потом проскочила мысль , в правильном ли я направлении копаю , а если не в этом дело , или в чём нибудь другом?

В общем у меня полная неразбериха в голове с достаточно коротеньким кодом.
Помоги пожалуйста разобраться.

П.С. это часть кода формы добавления материала на 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>

рони · #4 (**permalink**) 14.01.2014, 22:58

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>

Corey · #5 (**permalink**) 14.01.2014, 23:24

рони , b:contains менял на label:contains и не чего....
Мне очень , очень , стыдно но я только что нашёл ответ

Он скрывался не в селекторах там их функциях а в элементарной моей нупской внимательности...

Я заменил $('label:contains( на $('#uCatsMenu9 label:contains( и всё пошло...
Извини что задолбал тебя.
Спосибо большое , при большое , человеческое спасибо!

Corey · #6 (**permalink**) 14.01.2014, 23:28

Плюсовать ща не могу по позже +ну
П.С. Спосибо за помощ

и терпение

Форум

Справочник

Discord чат

Курсы javascript