Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: AJAX + Firefox некорректное отображение checkbox

Приветствую всех!

В процессе написания кода для создания дерева (каталог) столкнулся с проблемой некорректного отображения статуса чекбокса.

Предистория:
Раскрывающаяся ветка для дерева создается с помощью скрипта на jQuery (с использованием AJAX) (все ОК, работает в: ie, opera, firefox, Chrome)

название дерева
- категория 1
--подкатегория 1
--подкатегория 2
- категория 2
- категория 3

действия:
1. при загрузке страницы отображается первый уровень (категория 1, 2, 3)
2. пользователь раскрывает категорию
3. в появившейся подкатегории выделяет "подкатегория 1"
4. в базе данных сохраняется статус "подкатегории 1" (javascript по клику на чекбоксе)
5. пользователь обновляет страницу (F5)
6. на странице отображается дерево без подкатегорий (аля шаг 1)
7. firefox отображает выделенным элемент (категория 2)

т.е. firefox тикает при обновлении "второй" элемент дерева на странице,
соответственно, если в начале выделить "подкатегорию 2", то после обновления он выделит "категорию 3" (третий чекбокс на странице)

В ie, opera chrome все работает корректно, после обновления страницы некорректные элементы не выделяются

PS: при просмотре кода через firebug, некорректно выделенный чекбокс не имеет флага checked
PSS: если обновлять ctrl+F5 - все отображается корректно, поэтому подозреваю что проблема в кукис либо кэше файрфокса

jquery код создания ветки:
function getSubTree(){
  $('img.tree_plus').live("click", function(){
    var id = $(this).next().attr('value');
    var $res = $(this).parent().parent();
    var path = document.location.pathname;
    var img = $(this).attr('src');
    if (path.indexOf('userpage')>0){
        var page = 'admin';
        var inputtype = 'checkbox';
    } else if (path.indexOf('personal')>0){
        var page = 'personal';
        var inputtype = 'checkbox';
    } else {
        var inputtype = 'radio';
        var page = 'index';
    }
    if (img.indexOf('plus')>0){
        img = img.replace('plus', 'minus');
        $(this).attr('src', img);
        $res.after('<div></div>');
        $.ajax({type: "POST", url: "/admin/get_subtree", data: {id:id, page:page, inputtype:inputtype}, dataType: "text", success: function(msg){
                $res.next().html(msg);
        }});
    } else{
        img = img.replace('minus', 'plus');
        $(this).attr('src', img);
        $res.next().remove()
    };
  });
};


Заранее спасибо всем кто откликнется
Александр
Ответ: all87, спаисбо за подсказку. Ваш совет помог побороть FF, который select'ы запоминает сам и выделяет их по своему усмотрению, а ajax естественно думает что выделен первый.
Вопрос: Клонируем input checkbox значение name

Всем привет нужна помощь сам сильно не владею javascript в процессе изучения.
Нужно checkbox который по клику сделает clon значения name и сможет передать его в другой input в атрибут value без лишних элементов HTMl и при этом нужно чтоб были классы там чекбоксы будут множественные.

Мне удалось найти подходящий javascript для этой задачи но там есть проблема то что он делает клон и передает его в элемент label, а мне надо чтоб был чистое текстовое значение name.

Пробовал сам передать в input но получалась ерунда у меня туда по подали только элементы HTML


Прошу Вас специалисты javascripta помогите очень надо.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<div id="area">
<input type="checkbox" /> <label>1</label>
<input type="checkbox" /> <label>2</label>
<input type="checkbox" /> <label>3</label>
<input type="checkbox" /> <label>4</label>
<input type="checkbox" /> <label>5</label>
<input type="checkbox" /> <label>6</label>
<input type="checkbox" /> <label>7</label>
<input type="checkbox" /> <label>8</label>
<input type="checkbox" /> <label>9</label>
</div>

<div id="clones">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<script type="text/javascript">
$('#area input:checkbox').each(function (i, g) {
	this.onchange = function () {
		if (this.checked) {
			$('#clones span').eq(i).html($(g).next().clone());
		} else {
			$('#clones span').eq(i).empty();
		}
	}
});
</script>
Ответ: Если честно, надоел уже это JavaScript. Записывал 2 раза в обработчик события onchange функцию, но эффект всегда один и тот же: пока идет запись видно что в строке-переменной onchange записывается функция, как только выходит из записи сразу же там ничего нет(null, если быть точным).
2 способа записи:
1)
$('#area input:checkbox').each(function(i, v){
document.body.innerHTML += "<br>Прошли по "+i+"-му элементу";

	this.onchange = function OnChangeFunction(){
	        document.body.innerHTML += "Изменен "+i+"-ый checkbox";
		if(this.checked){
			$('#clones span')[i].html = $('label')[i].html;
			document.body.innerHTML += "Выделен "+i+"-ый checkbox";
		} 
	}
});

2)
for(prop in mi)
{
//foreach
mi[prop].onchange = function mo()
    {
    document.body.innerHTML += "Изменен "+prop+"-ый checkbox";        
    }
}

Может кто-нибудь скажет почему так происходит, т.е. почему после окончания записи в строке-переменной onchange находится null???
Вопрос: click checkbox for send data

Здравствуйте, я рад приветствовать вас!

Я столкнулся с проблемой и нуждаюсь в помощи. Надеюсь моя просьба будет не слишком наглой.
Дело в том, что я javascript и jquery я еще не разбираюсь, так как не хочу хвататься за несколько языков сразу и метаться между ними, изучаю сейчас php

Я пишу сайт корпоративный для жены, в целом все готово, лишь осталось дописать админку.

На странице списка зарегистрированных пользователей, сверстал разметку, в которой оформил checkbox



Бегунки активны и переключаются.

input[type="checkbox"]{display: none;}
input[type="checkbox"] + label{cursor: pointer;padding-left: 50px;position: relative;font-family: tahoma, sans-serif, arial;}
input[type="checkbox"] + label::before{content: "";display: inline-block;position: absolute;top: 0;left: 0;vertical-align: middle;padding: 0;height: 15px;width: 36px;margin: 0 5px 0 0;border: 1px solid #dadada;border-radius: 12px;background: #fc7979;}
input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after{-webkit-transition: all .2s ease-out;transition: all .2s ease-out;}
input[type="checkbox"] + label::after{content: "";display: block;position: absolute;top: 1px;left: 1px;width: 22px;height: 13px;border-radius: 22px;
background: #fff;border: 1px solid #dadada;box-shadow: 0 3px 3px rgba(140, 140, 140, .1);}
input[type="checkbox"]:checked + label::before{background: #6edc5f;border-color: #6dd75e;}
input[type="checkbox"]:checked + label::after{left: 13px;}



Вывел с БД список пользователей:

$sql = "SELECT * FROM `cordinators`";
$sql = mysql_query($sql, $link_connect);
while ($cordinators = mysql_fetch_assoc($sql)){
    if($cordinators['first'] == 'yes'){
        $first = '<img src="check_box.png" alt="" />';
    }else{
        $first = '<img src="cancel.png" alt="" />';
    }
 
    if($cordinators['status'] == 'activated'){
        $a = 'checked';
    }else{
        $a = '';
    }
    
    echo '
        <div class="cordinator">
            <a href="cordi_edit.php?=id'.$cordinators['id'].'" id="edit"><img src="application_edit.png" alt=""/></a>
            <div class="name">'.$cordinators['surname'].' '.$cordinators['name'].' '.$cordinators['patronymic'].'</div>
            <div class="email">'.$cordinators['email'].'</div>
            <div class="user_group">'.$cordinators['user_group'].'</div>
            <div class="UCode">'.$cordinators['UCode'].'</div>
            <div class="first">'.$first.'</div>
            <div class="status"><input type="checkbox" id="'.$cordinators['id'].'" checked="'.$a.'" /> <label for="'.$cordinators['id'].'"></label></div>
        </div>
    
    ';
}





id стилей для <input type="checkbox" /> в цикле нужен индивидуальный, чтобы работал <label for=""></label>
Выдал его по id пользователей.


Эта проверка определяет, активирована учетка или нет, в соответствии: checked="'.$a.'"


if($cordinators['status'] == 'activated'){
        $a = 'checked';
    }else{
        $a = '';
    }



Суть идеи такова, как сделать, чтобы переключая в этом списке учеток этот чек бокс на записи пользователя и в БД менять статус учетки activated/deactivated

Знаю что это делается через ajax, но даже не представляю как такой скрипт написать и обработчик

Знаю моя просьба возможно наглая, но без помощи я не решу вопрос.

Благодарю
Ответ:
Сообщение от qpurypaHT
т.е. в страктуре sql полю status установить "По умолчанию" NULL и далее запрос типа
Вообще-то для такого выгоднее или BOOLEAN или TINYINT тип поля, ну или ENUM. Ведь значение этого поля как activated/deactivated не несет в себе никакого глубокого смысла, а с токи зрения производительности проигрывает ранее указанным трем типам. Первые два типа это числа, а ENUM только в отображении строка, во внутреннем представлении это числа. Вы же сознательно оперируете строками там, где большой надобности в них нет.

Работа флажка как элемента формы имеет особенность - если флажок не выбран, то он на север не передается. Следовательно - пришел флажок, пишем в базу 1, нет флажка, пишем 0. Если значению флажка указать 1 и если нотайсы отключены, что должно быть правилом на удаленном сервере, то проверка его наличия и значения проста:

$check = (int)$_POST['check'] & 1; //пишем $check в базу


Сообщение от qpurypaHT
не знаю что значит ? и :
Это . Его можно привести к более сокращенному виду по логике равному JS выражению a = b || c:

$check = (int)$_POST['check'] ?: 0; //то есть не важно что хранит $_POST['check'], какое число, важно что установлено, либо по умолчанию - 0, не установлено
//хотя в данном случае, если не важно, это лишено смысла, но показано для примера


Ну и при выводе:

<input type="checkbox" value="1" <?=$cordinators['status'] ? 'checked' : null?>>


В случае ENUM, это 1 => неактивен, 2 => активен, или наоборот. Видим при выводе, к примеру для контроля, неактивен / активен, в базу можно писать 1 и 2, соответственно, как и искать по 1 и 2 при выборке. Читайте SQL.
Вопрос: Живой поиск и checkbox

Здравствуйте. Имеется такой код.
<div class="who">
	 <input type="text" name="referal" style="width:200px;margin-left:35%;" placeholder="" value=""   autocomplete="off">
    <input type='checkbox' name='jobs' value="j">Работа
    <input type='checkbox' name='peoples' value="p">Люди
    <input type='checkbox' name='callboard' value="c">Объявления
</div>
<div class="search_result"></div>

$('.who').on('click','input', function() {
                var obj = $('.who input:checked');
                if(obj.length > 0){
                    var d ={};
                    obj.each(function(i,e){
                        d[$(e).attr('name')] = $(e).val();
                        console.log($(e).attr('name')+" - "+ $(e).val());
                        $.ajax({
                            type: 'post',
                            url: "search_ajax.php", 
                            data: d,
                            response: 'text',
                            success: function(data){
                                $(".search_result").html(data).fadeIn(); 
                        }
                        })
                    })
                } else {
                    console.log('length = 0');
                }
     
 
        if(this.value.length >= 2){
            $.ajax({
                type: 'post',
                url: "search_ajax.php", 
                data: {'referal':this.value},
                response: 'text',
                success: function(data){
                    $(".search_result").html(data).fadeIn(); 
                }
            })
        }
    })

Мне же надо, что бы при клике чекбоксу или по text, отправлялся сборный POST, а не по отдельности. Подскажите, как это реализовать. Чтобы учитывалось что выбрано.
Ответ:
Сообщение от Salvat
Мне же надо, что бы при клике чекбоксу или по text, отправлялся сборный POST, а не по отдельности. Подскажите, как это реализовать.
Вот почитай...
Вопрос: checkbox + mysql

Привет всем.
Есть десяток checkbox, которые при активации выполняют суммирование значений. В этой теме спрашивал про суммирование:

Сейчас хочу сохранять в базу mysql сумму полученную и состояние checkbox, чтобы при открытии страницы увидеть какие чекбоксы были выбраны, и при необходимости выбрать другие и сохранить...

Работу с mysql делаю через php, тут все работает.
А строку из активных checkbox сохранять в скрытую <output>.
Помогите пожалуйста с этим...
Ответ: Хочу реализовать на javascript включение чекбоксов...
Вот такая функция по идее должна работать...
function init() {
	str='s1s2s5s7';
	asrt = str.match(/s\d+/g);
	for (var i = 0; i < asrt.length; i++){
		document.getElementById(asrt[i]).checked=true;
		document.getElementById(asrt[i]).click();
	}

}

Не пойму только как мне ее запустить после загрузки страницы...
Подскажите плиз.
Вопрос: Автоматическое выделение checkbox

Есть скрипт, который делает автоматические выделение всех инпутов, когда отмечен первый.

<script type="text/javascript">
                                function checkAll(obj) {
                                    'use strict';
                                    // Получаем NodeList дочерних элементов input формы: 
                                    var items = obj.form.getElementsByTagName("input"),
                                            len, i;
                                    // Здесь, увы цикл по элементам формы:
                                    for (i = 0, len = items.length; i < len; i += 1) {
                                        // Если текущий элемент является чекбоксом...
                                        if (items.item(i).type && items.item(i).type === "checkbox") {
                                            // Дальше логика простая: если checkbox "Выбрать всё" - отмечен            
                                            if (obj.checked) {
                                                // Отмечаем все чекбоксы...
                                                items.item(i).checked = true;
                                            } else {
                                                // Иначе снимаем отметки со всех чекбоксов:
                                                items.item(i).checked = false;
                                            }
                                        }
                                    }
                                }
                                </script>



<input type="checkbox" value="all" name='one' onClick="checkAll(this);"  /> 
<input type="checkbox" name="time[1]"  /> 
<input type="checkbox" name="time[2]"   /> 
<input type="checkbox" name="time[3]"   /> 




<input type="checkbox" name='name'  />



Но мне нужно чтобы выделиляись только checkbox, с именами time[], а последний checkbox с именем name не выделялся.

Заранее благодарен за помощь.
Ответ: Делайте сразу NodeList нужных элементов в 5 строке и отпадет нужда в проверке (строка 10) как бонус
Давно уже есть метод для этого document.querySelectorAll('selector');
<input type="checkbox" value="all" name='one' onchange="checkAll(this);"  />
<input type="checkbox" name="time[1]"  />
<input type="checkbox" name="time[2]"   />
<input type="checkbox" name="time[3]"   />
<input type="checkbox" name='name'  />

<script>
    function checkAll(obj) {
		var nodes = document.querySelectorAll('input[name^=time'); 
		[].forEach.call(nodes, function(el) {
			el.checked = obj.checked;
		});
    }
</script>
Вопрос: помогите поправить скрипт checkbox'a

есть скрипт для изменения дизайна checkbox'a.
Он работает, но при условии если идет вот такая структура:
<input type="checkbox" id="1" class="styled" /><label for="1"> test1</label>


мне надо, что бы была вот такая структура и он работал:
<label for="2"><input type="checkbox" id="2" class="styled" /> test2</label>


помогите подправить сам скрипт.

Вот выкладываю:
<script>
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: '+selectWidth+"px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>");var Custom={init:function(){var e,t,i,o=document.getElementsByTagName("input"),s=Array();for(a=0;a<o.length;a++)("checkbox"==o[a].type||"radio"==o[a].type)&&o[a].className.indexOf("styled")>-1&&(s[a]=document.createElement("span"),s[a].className=o[a].type,1==o[a].checked&&("checkbox"==o[a].type?(position="0 -"+2*checkboxHeight+"px",s[a].style.backgroundPosition=position):(position="0 -"+2*radioHeight+"px",s[a].style.backgroundPosition=position)),o[a].parentNode.insertBefore(s[a],o[a]),o[a].onchange=Custom.clear,o[a].getAttribute("disabled")?s[a].className=s[a].className+=" disabled":(s[a].onmousedown=Custom.pushed,s[a].onmouseup=Custom.check));for(o=document.getElementsByTagName("select"),a=0;a<o.length;a++)if(o[a].className.indexOf("styled")>-1){for(t=o[a].getElementsByTagName("option"),i=t[0].childNodes[0].nodeValue,e=document.createTextNode(i),b=0;b<t.length;b++)1==t[b].selected&&(e=document.createTextNode(t[b].childNodes[0].nodeValue));s[a]=document.createElement("span"),s[a].className="select",s[a].id="select"+o[a].name,s[a].appendChild(e),o[a].parentNode.insertBefore(s[a],o[a]),o[a].getAttribute("disabled")?o[a].previousSibling.className=o[a].previousSibling.className+=" disabled":o[a].onchange=Custom.choose}document.onmouseup=Custom.clear},pushed:function(){element=this.nextSibling,this.style.backgroundPosition=1==element.checked&&"checkbox"==element.type?"0 -"+3*checkboxHeight+"px":1==element.checked&&"radio"==element.type?"0 -"+3*radioHeight+"px":1!=element.checked&&"checkbox"==element.type?"0 -"+checkboxHeight+"px":"0 -"+radioHeight+"px"},check:function(){if(element=this.nextSibling,1==element.checked&&"checkbox"==element.type)this.style.backgroundPosition="0 0",element.checked=!1;else{if("checkbox"==element.type)this.style.backgroundPosition="0 -"+2*checkboxHeight+"px";else for(this.style.backgroundPosition="0 -"+2*radioHeight+"px",group=this.nextSibling.name,inputs=document.getElementsByTagName("input"),a=0;a<inputs.length;a++)inputs[a].name==group&&inputs[a]!=this.nextSibling&&(inputs[a].previousSibling.style.backgroundPosition="0 0");element.checked=!0}},clear:function(){inputs=document.getElementsByTagName("input");for(var a=0;a<inputs.length;a++)"checkbox"==inputs[a].type&&1==inputs[a].checked&&inputs[a].className.indexOf("styled")>-1?inputs[a].previousSibling.style.backgroundPosition="0 -"+2*checkboxHeight+"px":"checkbox"==inputs[a].type&&inputs[a].className.indexOf("styled")>-1?inputs[a].previousSibling.style.backgroundPosition="0 0":"radio"==inputs[a].type&&1==inputs[a].checked&&inputs[a].className.indexOf("styled")>-1?inputs[a].previousSibling.style.backgroundPosition="0 -"+2*radioHeight+"px":"radio"==inputs[a].type&&inputs[a].className.indexOf("styled")>-1&&(inputs[a].previousSibling.style.backgroundPosition="0 0")},choose:function(){for(option=this.getElementsByTagName("option"),d=0;d<option.length;d++)1==option[d].selected&&(document.getElementById("select"+this.name).childNodes[0].nodeValue=option[d].childNodes[0].nodeValue)}};window.onload=Custom.init;
		
		
		</script>
<style type="text/css">
.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url('http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/checkbox.png') no-repeat;
display: block;
clear: left;
float: left;
}
</style>
<input type="checkbox" id="1" class="styled" /><label for="1"> test1</label>
Ответ: djonA,
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[type="checkbox"]{
  display: none;
}

label:before{
  content: '';
  background-position: 0 0;
  width:19px;
  height:25px;
   margin-right: 5px;
  background:url('http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/checkbox.png') no-repeat;
  display: inline-block;
  clear:left;
  float:left;

}
label{
  height:25px;
  display:block;
}

label.styled:before{
    background-position: 0px -50px;
  }
</style>
  <script>
document.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll('[type="checkbox"]'), function(item) {
         item.parentNode.classList[item.checked ? 'add' : 'remove']('styled');
        item.addEventListener('change', function() {
        item.parentNode.classList[item.checked ? 'add' : 'remove']('styled');
        });

});

    });
</script>
</head>

<body>
<label for="1"><input type="checkbox" id="1" class="styled" /> test1</label>
<label for="2"><input type="checkbox" id="2" class="styled"  checked="checked"/> test2</label>
</body>

</html>
Вопрос: Работа с checkbox в таблицах

Добрый день уважаемые. Встала такая задача, как по нажатию на флажок в ячейке таблици сделать так, что б свое состояние меняли на противоположное все другие флажки по вертикали и по горизонтали относительно этого? Приведу пример что б было понятнее
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

</head>
<body>
<table>
  <tr>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key" checked></th>
  </tr>
  <tr>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
  </tr>
  <tr>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
  </tr>
  <tr>
    <th><input type="checkbox" name="key" class="key" checked></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
  </tr>
</table>


<script>
  $(".key").on("click", function(){
	console.log("key");

});

</script>
</body>
</html>


Как по нажатию на первый чекбокс, сделать так что б в первом ряду были включены 123 а 4-й был выключен и при этом в первом столбце 123 были включены а 4-й выключен. Как организовать правильную выборку ?
Ответ:
Сообщение от Black_Star
По горизонтали меняет, а вот по столбцам чёт нет.
$(".key").on("change", function(){
        var o = $(this), t = o.closest('tr'), e = t.find(':checkbox'), i = e.index(o);
        e.not(o).add($.map(t.siblings(), function(e) {
            return $(e).find(':checkbox').eq(i)[0]
        })).prop('checked', function() {
            return !this.checked
        });
    });
Вопрос: Блокировка неотмеченных checkbox при загрузке страницы

Есть скрипт
var Cont = 0; 
function mFunc (x, y) 
{ 
var e = x || window.event, o = e.target || e.srcElement; with (o) 
var s = (tagName == 'INPUT' && type == 'checkbox' && name == 'cat_zp[]'); if (s) {Cont += 2 * o.checked - 1; 
for (var j = 0, p = y.getElementsByTagName ('INPUT'); j < p.length; j++) with (p [j]) 
if (type == 'checkbox' && name == 'cat_zp[]') disabled = !(Cont - checked - 3)} 
}

и код
<ul >
   <li id="lica"><input  type="checkbox" name="cb[]"></li>
   <li id="lica"><input  type="checkbox"name="cb[]"></li>
   <li id="lica"><input  type="checkbox"name="cb[]"></li>
   <li id="lica"><input  type="checkbox"name="cb[]"></li></ul>

Все это отлично работает если чекбоксы еще не отмечены. Но если уже отмечен хотя бы один чекбокс, то кроме него можно отметить еще 3. Как сделать чтобы скрипт "видел" что чекбокс уже отмечен ?
Ответ: linoxru,
Нужно, чтобы отмеченный checkbox оставался отмеченным при перезагрузке страницы и чтобы нельзя было отметить ещё checkbox'ы кроме уже выбранного?
Вопрос: Добавлять класс для 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>