Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Добавлять класс для label при активном checkbox?

Есть такая структура
<table id="chbBlogsLabelsList" border="0">
  <tbody><tr>
    <td><input id="chbBlogsLabelsList_0" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_0"><label for="chbBlogsLabelsList_0">еда</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_1" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_1"><label for="chbBlogsLabelsList_1">концерт</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_2" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_2"><label for="chbBlogsLabelsList_2">dj</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_3" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_3"><label for="chbBlogsLabelsList_3">коктейль</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_4" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_4"><label for="chbBlogsLabelsList_4">кальян</label></td>
  </tr>
</tbody></table>


При активном чекбоксе добавляю класс
$(function() {
$( "#chbBlogsLabelsList input" ).on( "click", function() {
            if($(this).is(":checked")) { $(this).addClass("qqqq");}
   else {$(this).removeClass("qqqq");}
})
});


класс добавляется для input
мне нужно чтобы если класс добавлен для input то он добавлялся и для label,соответственно если чекбокс не активен то и с label класса убирался
Ответ: INSIDER73,
для данной структуры достаточно только css
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

 <style type="text/css">
   #chbBlogsLabelsList input:checked + label{
     border: solid 2px #0066FF;
     border-radius: 8px;
       padding: 4px 8px;
   }
   #chbBlogsLabelsList input{
     display: none;
   }

 </style>
</head>

<body>
<table id="chbBlogsLabelsList" border="0">
  <tbody><tr>
    <td><input id="chbBlogsLabelsList_0" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_0"><label for="chbBlogsLabelsList_0">еда</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_1" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_1"><label for="chbBlogsLabelsList_1">концерт</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_2" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_2"><label for="chbBlogsLabelsList_2">dj</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_3" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_3"><label for="chbBlogsLabelsList_3">коктейль</label></td>
  </tr><tr>
    <td><input id="chbBlogsLabelsList_4" type="checkbox" name="ctl00$cphMain$chbBlogsLabelsList$chbBlogsLabelsList_4"><label for="chbBlogsLabelsList_4">кальян</label></td>
  </tr>
</tbody></table>


</body>
</html>
Вопрос: Клик по двум label

Вопрос знатокам: можно ли как-то кликнуть по двум label разных input одновременно. Если поместить их друг над другом click не всплывает. без js.
Ответ: Ruslan_xDD,
надо открыть ларец с 1 клика по label -- остальное css ??
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  img{
    display: none;
  }
  #a:checked ~ #b:checked ~ img{
    display: block;
  }


  </style>
</head>

<body>
<input id="a" name="" type="checkbox">
<input id="b" name="" type="checkbox">
<label for=a>1 замок </label>
<label for=b>2 замок</label>
<img src="https://allods.mail.ru/images/news/larecccc.gif" alt="">
</body>

</html>
Вопрос: Функция для <label> и <input>

Добрый день. Подскажите функцию, вытягивающий текст из input по поиску label "Название". В виде алерта.

<div class="col-touch-right col-sm-2"><label class="control-label">Название</label></div><div class="col-sm-10"><input type="text" readonly="" value="Тут текст" class="form-control"></div>
Ответ:
Сообщение от laimas
$('label:contains("Название")').parent().next().children().val();
Сообщение от j0hnik
alert($('label:contains("Название")').parent().next().children().val());
Идеально работает. Спасибо большое.
Вопрос: Совершить клик по Label

Здравствуйте, пытаюсь сделать плагин для хрома.
Нужно совершить пару кликов, но не получаться, клик просто не происходит.
Я так понимаю потому что за label стоит checkbox и такой код не помогает:
document.getElementById('country_code_AF').click()

Спасибо laimas . Оказывается клик срабатывал, просто этого не было видно.

Вот кусок страницы:
<div id="country-block">
  <div id="country-list">
    <ul>
        <li class="country-wrap">
          <input id="country_code_AF" value="AF" name="iso_country_code" type="checkbox">
          <label for="country_code_AF">Афганистан</label>
        </li>
</ul>
  </div>
  </div>
Ответ: А метка и не должна выделяться, рабочий в этой "связке" флажок, а метка для удобства, чтобы можно было выбирать/снимать флажок щелчком не только по нему, но и по тексту связанному с ними, который определяется label.
Вопрос: Выровнять в label

Как выровнять в label у меня в этой строке картинка и текст я хочу что бы все было по середине по вертикале.
Ответ:
выравнивай посередине при помощи
text-align: center

выравнивай по вертикали при помощи
position: relative;
top: 10px;
Вопрос: Вывод у активного checkbox текста по тегом label

<html>
<head><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script></head>
<body>
<input type="checkbox" value="12" id="1" name="id[]"> <label for="1">Label</label>
<input type="checkbox" value="123" id="2" name=id[]"> <label for="2">Label</label>
<input type="checkbox" value="17" id="3" name="id[]"> <label for="3">Label</label>
<input type="checkbox" value="12233" id="4" name="id[]"> <label for="4">Label</label>

<div id="testing"></div>

<script>
var inps=$("input[name='id[]']");
inps.change(function(){
var x='';
inps.each(function(){if($(this).is(':checked')){x+=$(this).val()+'; ';}});
$('#testing').html(x);
});
</script>
</body>
</html>

Посредствам JQ получилось вывести максимум value. Реально ли вывести текст, который находится под тегом label? Как это реализовать?
Ответ: Просто такие id="4" навевают мысли о скорой смерти. Я всего лишь хотел подчеркнуть, что технических ограничений нет, а культура есть.
Вопрос: Не могу выставить label и text в две колонки в форме

Здравствуйте! Есть форма нужно чтобы label и text были выставлены в две ровные колонки.
<div id="FormPromouter" style="float:left;">
<div>
<label>Введите фамилию:</label>
<input name="Surname" type="text"/></br>
</div> 
<div>
<label>Введите имя:</label>
<input name="Name" type="text" /></br>
</div> 
<div> 
<label>Введите отчество:</label>
<input name="Patronymic" type="text" /></br>
</div> 
<div>
<label>Введите мобильный:</label>
<input name="Mobile" type="text" /></br>
</div> 
<div>
<label>Введите Email:</label>
<input name="Email" type="text" /></br>
</div> 
</div>
Вопрос: Изменение фона label с помощью hover

вопрос довольно прост, есть код предположим некоторые три input аля radio кнопка
в label вывожу картинку:
HTML5
1
<img style='width: 50px;' src='img1.png'>
свою для каждого из трех.
HTML5
1
2
3
4
5
6
<input name='Name1' type='radio' id='family1' value='1' class='family'>
<label for='family1' class='family'><img style='width: 50px;' src='img1.png'></label>
<input name='Name1' type='radio' id='family2' value='2' class='family'> 
<label for='family2' class='family'><img style='width: 50px;' src='img2.png'></label>
<input name='Name1' type='radio' id='family3' value='3' class='family'>
<label for='family3' class='family'><img style='width: 50px;' src='img3.png'></label>
вообщем хотел ее в background запилить чтоб можно было поменять ее еси инпут disabled, но не получаеться, чето с синтаксисом намудрил

CSS
1
2
3
4
.family:not(:checked) + label #family3 {    
   background-image: url(img1.png) ;
   background-size: cover;
}
или

CSS
1
 #family3  + label {} 
или как его написать чтобы к нему фон нормально подтянулся??
Ответ: не не , уже поменял все ок, сделал
CSS
1
2
3
4
5
6
7
#family2:hover  + label:hover{
    background-color: rgba(217, 200, 20, 0.5);
} 
 
#family2 + label:hover {
    background-color: rgba(217, 200, 20, 0.5);
} 
Вопрос: Как найти значение label для radio?

Есть пример:
<input type="radio" name='country' value="111" id="answer_111" />&nbsp;<label for="answer_111">Исландия</label>
<input type="radio" name='country' value="222" id="answer_222" />&nbsp;<label for="answer_222">Швеция</label>


Как с помощью javascript (или jquery) определить содержимое label для выбранного пользователем радио-input?

Пробовал так (зная идентификатор):
// с jquery
alert($('label[for='+labelid+']').text());

Но получаю какую-то бредятину. Если вместо alert() использовать присовение переменной, то почему-то текст внутри label заменяется на undefined, вместо того, чтобы его получить.
Ответ:
Сообщение от robertbat
Как сделать вывод всех выбранных значений?
Для этого используют циклы...
Вопрос: Получить текст из label

Всех приветствую, помогите получить текст из поля label.
Код такой:

html:
<div class="wpcc_box wpcc_box_20" style="display: block;">
<div class="wpcc_description">
Доставка по
<br>
Екатеринбургу
</div>
<div class="wpcc_fields wpcc_radio wpcc_radio_20">
<label>
<input class="wpcc_jq_action wpcc_jq_action_20" type="radio" data-data="data" data-fid="20" data-type="radio" checked="" value="0" name="wpcc_structure[20]">
Вот этот текст хочется получить!
</label>
<label>
<input class="wpcc_jq_action wpcc_jq_action_20" type="radio" data-data="data" data-fid="20" data-type="radio" value="300" name="wpcc_structure[20]">
Либо этот текст!
</label>
</div>
<div class="wpcc_clear"></div>
</div>


что имею в js:
qqq = document.getElementsByName('wpcc_structure[20]');
for(y=0;y<(qqq).length;y++){
if(qqq[y].getAttribute('type')=='radio'&&qqq[y].checked) //true
{
alert(qqq[y].getAttribute('value')); //получаю value выбранного поле label
    }}


Поделитесь знаниями, как все таки получить текст между <label> тут текст </label>
Код HTML не изменен
Ответ: Рони! Спасибо огромное!
alert(qqq[y].parentNode.textContent); то что нужно )))))))))