Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Vasyanya
0 / 0 / 0
Регистрация: 03.10.2014
Сообщений: 12
#1

Окрашивание label при checked

03.02.2018, 20:23. Просмотров 480. Ответов 14
Метки нет (Все метки)

Доброго времени суток.
Подскажите пожалуйста, как окрасить label при нажатом checkbox.
Код https://jsfiddle.net/fydr2gmy/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="bf-attr-filter bf-attr-a19 bf-row ">
  <span class="bf-cell bf-c-1">
    <input id="bf-attr-a19_24_36" data-filterid="bf-attr-a19_24" type="checkbox" name="bfp_a19" value="24">
  </span>
  <span class="bf-cell bf-c-2 ">
    <span class="bf-hidden bf-attr-val">24</span>
    <label for="bf-attr-a19_24_36">
      до 1500 
    </label>
  </span>
  <span class="bf-cell bf-c-3"></span>
</div>
CSS
1
2
3
.bf-attr-filter input[type="checkbox"]:checked + label {
  background: green;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.02.2018, 20:23
Ответы с готовыми решениями:

Как можно задать checked или что то еще другим значениям на сайте ? А то при использовании checked для дргого
Как можно задать checked или что то еще другим значениям на сайте ? А то при...

селектор при checked
Есть документ html &lt;input type=&quot;radio&quot; name=&quot;chetyre&quot; id=&quot;chetyre1&quot;/&gt;...

Блочная верстка (окрашивание сайдбаров до футеров)
Добрый день. Скажите, пожалуйста, есть ли какой-то способ создания градиентных...

Чекбокс не отмечается при клике на текст <label>
Помогите, пожалуйста, определить, в чем причина проблемы. Нужно, чтобы чекбоксы...

Не отмечается чекбокс при клике по label, суть бага в прочерке в атрибуте ID
Исходный код такой: &lt;div class=&quot;opg-width-1-1&quot;&gt; &lt;input id=&quot;checkmyi_field&quot;...

14
andyyy
564 / 172 / 102
Регистрация: 26.05.2016
Сообщений: 1,276
03.02.2018, 21:04 #2
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="bf-attr-filter bf-attr-a19 bf-row ">
  <span class="bf-cell bf-c-1">
    <input id="bf-attr-a19_24_36" data-filterid="bf-attr-a19_24" type="checkbox" name="bfp_a19" value="24">  
    <label for="bf-attr-a19_24_36">
      до 1500 
    </label>
  </span>
  <span class="bf-cell bf-c-2 ">
    <span class="bf-hidden bf-attr-val">24</span>
  
  </span>
  <span class="bf-cell bf-c-3"></span>
</div>
CSS
1
2
3
#bf-attr-a19_24_36:checked + label {
  background: green;
}
0
Vasyanya
0 / 0 / 0
Регистрация: 03.10.2014
Сообщений: 12
03.02.2018, 22:18  [ТС] #3
Не работает.
И проблема в том, что это значения a19_24_36 для каждой ячейки свое.
Это в фильтре brainyfilter
Кликните здесь для просмотра всего текста


У каждого фильтра свой класс, и если прописать так, то будет только для одного параметра.
Надо как-то для всех.
0
Qwerty_Wasd
901 / 667 / 343
Регистрация: 16.04.2016
Сообщений: 1,831
Завершенные тесты: 2
04.02.2018, 18:20 #4
Vasyanya,Можно на JS. К примеру - песочница
Javascript
1
for(var i=0;i<document.querySelectorAll('.bf-row span.bf-cell>input[type="checkbox"]').length;i++){document.querySelectorAll('.bf-row span.bf-cell>input[type="checkbox"]')[i].onchange=function(){Array.from(document.querySelectorAll('.bf-row span.bf-cell>input[type="checkbox"]')).map((v,i)=>{if(v.checked) Array.from(document.querySelectorAll('.bf-row span.bf-cell>label'))[i].style.cssText="background-color:green"; else Array.from(document.querySelectorAll('.bf-row span.bf-cell>label'))[i].style.cssText="" });}}
0
Qwerty_Wasd
901 / 667 / 343
Регистрация: 16.04.2016
Сообщений: 1,831
Завершенные тесты: 2
04.02.2018, 18:28 #5
Кстати
Цитата Сообщение от Vasyanya Посмотреть сообщение
И проблема в том, что это значения a19_24_36 для каждой ячейки свое.
проблема как раз не в этом. А в том что, у вас каждый label в отдельный span вынесен. Вот почему правило
CSS
1
2
3
#bf-attr-a19_24_36:checked + label {
  background: green;
}
не сработает.
0
Миниатюры
Окрашивание label при checked  
andyyy
564 / 172 / 102
Регистрация: 26.05.2016
Сообщений: 1,276
04.02.2018, 22:48 #6
Цитата Сообщение от Vasyanya Посмотреть сообщение
Не работает.
все работает
Цитата Сообщение от Vasyanya Посмотреть сообщение
И проблема в том, что это значения a19_24_36 для каждой ячейки свое.
если бы визуально этот момент объяснили бы - я так не понимаю(
0
Qwerty_Wasd
901 / 667 / 343
Регистрация: 16.04.2016
Сообщений: 1,831
Завершенные тесты: 2
04.02.2018, 23:08 #7
andyyy, посмотрите моих два поста выше - все поймете.
0
Vasyanya
0 / 0 / 0
Регистрация: 03.10.2014
Сообщений: 12
06.02.2018, 21:47  [ТС] #8
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Vasyanya,Можно на JS. К примеру - песочница
Javascript
1
for(var i=0;i<document.querySelectorAll('.bf-row span.bf-cell>input[type="checkbox"]').length;i++){document.querySelectorAll('.bf-row span.bf-cell>input[type="checkbox"]')[i].onchange=function(){Array.from(document.querySelectorAll('.bf-row span.bf-cell>input[type="checkbox"]')).map((v,i)=>{if(v.checked) Array.from(document.querySelectorAll('.bf-row span.bf-cell>label'))[i].style.cssText="background-color:green"; else Array.from(document.querySelectorAll('.bf-row span.bf-cell>label'))[i].style.cssText="" });}}
Спасибо. Интересное предложение.
Я не разбираюсь в Javascript.
При подключении данного скрипта получилось следующее.
Подсвечивается первый label, а не тот который выбран.
Окрашивание label при checked

Первые 3 группы атрибутов (цена, кому, повод) являются radio.
Вот надо как-то сделать, что при нажатии label подсвечивался, как и на radio, так и на checkbox.
Подскажите пожалуйста!
0
Qwerty_Wasd
901 / 667 / 343
Регистрация: 16.04.2016
Сообщений: 1,831
Завершенные тесты: 2
06.02.2018, 22:32 #9
Vasyanya,
Цитата Сообщение от Vasyanya Посмотреть сообщение
При подключении данного скрипта получилось следующее.
при подключении моего скрипта должны были окрашиваться эти - смотрим скрин. Ведь brainyfilter у вас два блока на той странице, что вы предоставили. А именно
Цитата Сообщение от Vasyanya Посмотреть сообщение
http://demo.brainyfilter.com/Office-equipment/Scanners
А теперь я вижу, как вы признали не разбираясь в JS, пытаетесь использовать тот же скрипт на другом сайте, другом участке кода, другом дереве DOM. И чего вы ждали? Вопрос нормально формируйте. Здесь экстрасенсов нет.
0
Миниатюры
Окрашивание label при checked  
Vasyanya
0 / 0 / 0
Регистрация: 03.10.2014
Сообщений: 12
07.02.2018, 21:05  [ТС] #10
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Vasyanya, при подключении моего скрипта должны были окрашиваться эти - смотрим скрин. Ведь brainyfilter у вас два блока на той странице, что вы предоставили. А именно А теперь я вижу, как вы признали не разбираясь в JS, пытаетесь использовать тот же скрипт на другом сайте, другом участке кода, другом дереве DOM. И чего вы ждали? Вопрос нормально формируйте. Здесь экстрасенсов нет.
Да, извините пожалуйста. Ступил.
Но я и не скрывал свое незнание в JS.
Помогите пожалуйста с этим окрашиванием.
Кликните здесь для просмотра всего текста
0
Qwerty_Wasd
901 / 667 / 343
Регистрация: 16.04.2016
Сообщений: 1,831
Завершенные тесты: 2
08.02.2018, 00:18 #11
Vasyanya, без обид - пока делал, очень хотелось проклясть Вас и вашу верстку. Держите - песочница
Javascript
1
2
for(var i=0;i<document.querySelectorAll('.bf-row span.bf-cell>input[type="radio"]').length;i++){document.querySelectorAll('.bf-row span.bf-cell>input[type="radio"]')[i].onchange=function(){Array.from(document.querySelectorAll('.bf-row span.bf-cell>input[type="radio"]')).map((v,i)=>{if(v.checked) Array.from(document.querySelectorAll('.bf-row span.bf-cell>label'))[i].style.cssText="background-color:green"; else Array.from(document.querySelectorAll('.bf-row span.bf-cell>label'))[i].style.cssText="" });}}
for(var i=0;i<document.querySelectorAll('.bf-attr-a16>span.bf-cell>input[type="checkbox"]').length;i++){document.querySelectorAll('.bf-attr-a16>span.bf-cell>input[type="checkbox"]')[i].onchange=function(){Array.from(document.querySelectorAll('.bf-attr-a16>span.bf-cell>input[type="checkbox"]')).map((v,i)=>{if(v.checked) Array.from(document.querySelectorAll('.bf-attr-a16 span.bf-cell>label'))[i].style.cssText="background-color:green"; else Array.from(document.querySelectorAll('.bf-attr-a16 span.bf-cell>label'))[i].style.cssText=""})}}
Да кстати, чуть не забыл =>
Цитата Сообщение от Vasyanya Посмотреть сообщение
Но я и не скрывал свое незнание в JS.
а значит поправить сами brainyfilter.js в коде которого прописан метод BrainyFilter.reset(), висящий обработчиком на кнопке сброса, вы не сможете. Сделал заранее сам. Пока вы писать не начали. Держите архив. А код что я дал выше, положите перед закрывающимся <body>. Проверил - все работает как надо.

архив
0
Миниатюры
Окрашивание label при checked  
Вложения
Тип файла: rar brainyfilter.rar (10.7 Кб, 1 просмотров)
Vasyanya
0 / 0 / 0
Регистрация: 03.10.2014
Сообщений: 12
08.02.2018, 17:58  [ТС] #12
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Vasyanya, без обид - пока делал, очень хотелось проклясть Вас и вашу верстку.
То-то думаю, что это у меня уши красные? =)))
Брали шаблон тут.
Кликните здесь для просмотра всего текста

Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
метод BrainyFilter.reset(), висящий обработчиком на кнопке сброса
Увидел Вашу вставку.
Javascript
1
$('.bf-row>.bf-cell label').removeAttr('style');
Все работает, за одним исключением.
При нажатии на bf-cross - цвет остается.
Попробовал вставить вашу строку в
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
addCross: function($obj) {
            var fid = $obj.data('filterid');
 
            $('input[data-filterid='+fid+']').each(function(){
                var checkbox = $(this);
                var parent = checkbox.closest('.bf-attr-filter');
                if($obj[0].checked) {
                    if (checkbox.is("input[type='radio']")) {
                        checkbox.parents('.bf-attr-block').find('.bf-cross').remove();
                    }
                    var cross = $('<span class="bf-cross" data-filterid="'+fid+'"></span>');
                    cross.click(function(){
                        var fid = $(this).data('filterid');
                        var $cross = $('.bf-cross[data-filterid='+fid+']');
                        $cross.closest('.bf-attr-filter').find('input').removeAttr('checked');
                        BrainyFilter.currentSendMethod($(this));
                        ВОТ СЮДА!
                        $cross.hide();
                        setTimeout(function(){$cross.remove();}, 500);
                    });
                    parent.find('.bf-c-3').html(cross);
                    checkbox.attr('checked', 'checked');
                    checkbox[0].checked = true;
                } else {
                    parent.find('.bf-cross').remove();
                    if (checkbox[0].checked) {
                        checkbox.removeAttr('checked');
                    }
                }
            });
        }
Но тогда у всех label сбрасывает стиль.
Поможете?
Спасибо за понимание)
0
Qwerty_Wasd
901 / 667 / 343
Регистрация: 16.04.2016
Сообщений: 1,831
Завершенные тесты: 2
08.02.2018, 18:49 #13
Vasyanya,
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
addCross: function($obj) {
            var fid = $obj.data('filterid');
 
            $('input[data-filterid='+fid+']').each(function(){
                var checkbox = $(this);
                var parent = checkbox.closest('.bf-attr-filter');
                if($obj[0].checked) {
                    if (checkbox.is("input[type='radio']")) {
                        checkbox.parents('.bf-attr-block').find('.bf-cross').remove();
                    }
                    var cross = $('<span class="bf-cross" data-filterid="'+fid+'"></span>');
                    cross.click(function(){
                        var fid = $(this).data('filterid');
                        var $cross = $('.bf-cross[data-filterid='+fid+']');
                        $cross.closest('.bf-attr-filter').find('input').removeAttr('checked');
                        BrainyFilter.currentSendMethod($(this));
                        $cross.closest('.bf-attr-filter').find('label').removeAttr('style');
                        $cross.hide();
                        setTimeout(function(){$cross.remove();}, 500);
                    });
                    parent.find('.bf-c-3').html(cross);
                    checkbox.attr('checked', 'checked');
                    checkbox[0].checked = true;
                } else {
                    parent.find('.bf-cross').remove();
                    if (checkbox[0].checked) {
                        checkbox.removeAttr('checked');
                    }
                }
            });
        }
0
Вложения
Тип файла: rar brainyfilter.rar (10.7 Кб, 0 просмотров)
Qwerty_Wasd
901 / 667 / 343
Регистрация: 16.04.2016
Сообщений: 1,831
Завершенные тесты: 2
08.02.2018, 18:50 #14
Это вам для саморазвития ТЫК и ТЫК
0
Vasyanya
0 / 0 / 0
Регистрация: 03.10.2014
Сообщений: 12
08.02.2018, 21:57  [ТС] #15
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Это вам для саморазвития ТЫК и ТЫК
Спасибо большое!
Все работает)
На досуге почитаю)
0
08.02.2018, 21:57
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.02.2018, 21:57

Sorry! This document cannot be checked
Валидатор пишет: Sorry! This document cannot be checked. Влияет ли это на...

Псевдокласс :checked
Здравствуйте, помогите пожалуйста. Есть блок типа &quot;Аккордеон&quot; (вертикальные...

не работает псевдокласс checked
Здравствуйте . Есть список включающий в себя вложенный список. при нажатии на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru