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

Я пишу тему для вордпресс и не знаю как сделать чекбокс в ворд пресс меню (wp_nav_menu), чтобы этот чекбокс фильтровал посты в зависимости от категорий WP, название этого меню и будут пункты категорий.

Я пробую написать следующий код. Не понимаю, почему не фильтрует
Помогите, пожалуйста, мне разобраться!
Код PHPHTML
1
2
3
4
5
6
7
8
<nav class="main_menu drop_down right">
<p><input type="checkbox" id="<?php checked(true, get_option( $value['id'] )); ?>" value="">
" onClick="check('ck1'); return false;">forum
<p><input type="checkbox" id="<?php checked(true, get_option( $value['id'] )); ?>" value="">
" onClick="check('ck2'); return false;">site
<p><input type="checkbox" id="<?php checked(true, get_option( $value['id'] )); ?>" value="">
" onClick="check('ck3'); return false;">game
</nav>
Ответ: я пробую создать меню в вордпрессе, чтобы оно фильтровало мои посты, которые разбиты по категориями и чтобы это выглядело примерно здесь на ссылке http://dynamick.github.io/multiple-filter-masonry/
Вопрос: Как сделать чекбокс включенным по-умолчанию?

Здравствуйте, программисты !
У меня есть такая проблема:
Не могу сделать так чтобы чекбокс по умолчанию был включен.
То есть в нем стояла галочка - только открыл страницу там уже стоит галочка ...
Заранее спасибо
Ответ:
Сообщение от the_false
<input type="checkbox" checked="checked" />

^^
Спасибо

Добавлено через 14 секунд
Сообщение от frabaaa
Вроде просто <input type="checkbox" checked>
Спасибо
Вопрос: кастомизация чекбоксов

Нужно сделать чекбоксы "красивыми".
На лейбл, в которых лежат чекбоксы, прикрепляется класс "checkbox-checked" в котором картинка с отмеченным чекбоксом. Так на лейбле на бекграунде стоит картинка пустого чекбокса.
вторая цепочка методов не работает как надо, если нажать на чекбокс, то класс "checkbox-checked" снимается со всемх чекбоксов, и присвается тому чекбоксу, на который был произведен клик. если чекбокс уже был отмечен, то класс снимается и с него тоже.
$(window).load(function() {
//проверяет при загрузке страницы, отмечен чекбокс или нет и на отмеченные чекбоксы вешает класс.
    $('input[type="checkbox"]').each(function () {
        if ($(this).prop('checked')) {
            $(this).parent().addClass('checkbox-checked');
        }
     });

  //по клику лейблу присваивается или удаляется класс, в зависимости от того, что в атрибуте "checked". 
    $('input[type="checkbox"]').bind("change", function(){
      if ($(this).is(":checked")) {
          $(this).parent('label').addClass('checkbox-checked');
      }
      else {
         $(this).parent('label').removeClass('checkbox-checked');
      }
    });

как я понимаю, проблема во всплытии событий, но уверенности нет. подскажите, в чем проблема, как ее можно устранить? как найти по ней инфу? заранее за помощь большая благодарность.
Ответ: тогда наверное дело в чем-то еще в коде. спасибо.
Вопрос: Значения чекбоксов

Доброго дня форумчане, а может и кому то ночи))
при помощи божьей и гугла конечно же требовалось создать калькулятор расчёта стоимости продукта.
Но вот незадача, большинство примеров с использованием JS
мало что понимаю в этой структуре, но калькулятор создать нужно было, получилось вот что
вот собсно код
HTML5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
[JS]<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Калькулятор стоимости</title>
         <body>
      <center>  <h1>Тестовая страница</h1></center>
       <center><i> <p>Калькулятор подсчёта примерной стоимости постройки</p></i></center>
    
<form name="Sum">
 
 Печь/барбекю<input type="checkbox" value="17000"/><br>
  Камин/печной компелкс<input type="checkbox" value="0"/>
  <br><br>
  Удалённость от города <br>
  от 0км до 50км<input type="checkbox" value="500"/><br>
  от 51км до 70км<input type="checkbox" value="700"/><br>
  от 71км до 150км<input type="checkbox" value="1000"/><br>
  <br><br>
  S=\ |Площадь|<br>
  1м <input type="checkbox" value="12500"/>&nbsp;на <input type="checkbox" value="12500"/><br>
  2м <input type="checkbox" value="25000"/>&nbsp;на <input type="checkbox" value="25000"/><br>
  3м <input type="checkbox" value="37500"/>&nbsp;на <input type="checkbox" value="37500"/><br>
  4м <input type="checkbox" value="50000"/>&nbsp;на <input type="checkbox" value="50000"/><br>
  5м <input type="checkbox" value="62500"/>&nbsp;на <input type="checkbox" value="62500"/><br>
  <br><br>
  Акрка (окно) <input type="checkbox" value="5000"/><br><br>
 Кирпич простой <input type="checkbox" value="0"/><br><br>
  Кирпич фигурный <input type="checkbox" value="10425"/><br><br>
  
  <output id="rezultat">Приблизительная итоговая сумма: 0 руб.</output>
</form>
 
<script>
var s = document.forms.Sum,
    d = s.querySelectorAll('input[type="checkbox"]:not([value]), input[type="checkbox"][value=""]');
  for (var i = 0; i < d.length; i++) // чтобы не было написано NaN, убираем в disabled пункты, где не прописаны значения
    d[i].disabled = true; 
s.onchange = function() { // начало работы функции сложения
 
  var n = s.querySelectorAll('[type="checkbox"]'),
      itog = 0;
     
  for(var j=0; j<n.length; j++)
    n[j].checked ? itog += parseFloat(n[j].value) : itog;
    document.getElementById('rezultat').innerHTML = 'Сумма: ' + itog;
}
</script>
 
</head>
   
    </body>
</html>[/JS]
что осталось, но никак не могу сделать из-за нехватки знаний в моей голове
1. Объеденить чекбоксы в группу, и при выборе в группе чекбоксов сделать выражение. Если выбран 1 чекбокс то второй становиться недоступным
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form name="Form">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</form>
 
<script>
var f = document.forms.Form;
f.onchange = function() {
  var n = f.querySelectorAll('[type="checkbox"]'),
      l = f.querySelectorAll('[type="checkbox"]:checked');
  for(var j=0; j<n.length; j++)
    if (l.length >= 3) { // если отметить три и более галочки
      n[j].disabled = true; // все чекбоксы становятся disabled
      for(var i=0; i<l.length; i++)
        l[i].disabled = false; // но disabled убирается с помеченных галочками чекбоксов
    } else {
      n[j].disabled = false; // если выделить менее трёх галочек, то disabled снимается со всех чекбоксов
    }
}
</script>
вот пример кода, но как его совместить или реализовать не имею понятия, ковырялся 2 часа без результата
2.Чекбокс "Арка" чтобы вибиралась, если только чекбокс выбран "КАМИНЫ И ПЕЧНЫЕ КОМПЛЕКСЫ"
3. Чекбокс кирпич фигурный чтобы прибавлял не определённую сумму, а 30% к конечной, так как это последний пункт

Устал курить гугл, ничего найти не могу, посему прошу помощи ветеранов войны с JS.
Благодарю за внимание!))


P.S.с JS какие то напряжёнки.
Если предложите код реализованный на PHP я не обижусь
Ответ:
CSS
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/* CSS Document */
 
p {
    margin:2px auto 6px 10px;
    font:12px Arial, Helvetica, sans-serif;
}
 
table {
    font:12px Arial, Helvetica, sans-serif;
}
 
#smash {
    margin-left:20px;
}
 
#full_calc {
    width:680px; /*Ширина переноса, по-умолчанию 780px */
    position:relative;
    overflow:hidden;
    color: #FFFFFF;
    transition: 1s;
}
#full_calc:hover {
color: #FFFFFF;
transition: 1s; /* затмение, плавный переход*/
}
 
#type_of_site {
    border:2px gray solid;
    width:500px; /*Ширина Бордера*/
    padding:2px 10px 2px 10px;
    color: #FFFFFF;
    transition: 1s;
}
#type_of_site:hover {
color: #FFFFFF;
transition: 1s;
}
 
#option_1, #option_2, #cms_choice  {
    display:none;
}
 
#config_site span{
    font:10px Arial, Helvetica, sans-serif;
}
 
#design, #programming {
    float:left;
    border:1px gray solid;
    width:350px;
    padding:2px 10px 2px 10px;
    margin-right:10px;
}
 
#summ{
color: #FFFFFF;
 transition: 2s;
}
 
#summ:hover  {
  color: #FAFF41;
   transition: 2s;
  
  }
 
#summ_nds{
color: #FFFFFF;
 transition: 2s;
}
  
#summ_nds:hover  {
  color: #4ED536;
   transition: 2s;
  
  }  
  

Надеюсь эта тема кому то и поможет))


P.S. Знаю знаю, говнокод, можно было и попроще, но знаете чего? как смог так и сделал.
jquery.js слишком большой, прикрепляю просто файлом который в архиве БЛИИИН,
модеры да вы чего? макс размер файла 50кб???
Вопрос: Обработка чекбоксов JS

Здравствуйте, уважаемые программисты. Подскажите пожалуйста немного по такому вопросу - есть два форма, в ней два input chekbox (две группы чекбоксов) - первая группа - тип вещей. вторая группа - подтип.

Пытаюсь прописать, чтобы в соответствии с выбранными типами вещей (отмеченными чекбоксами) в первом input checkbox, во втором выводились только чекбоксы (подтипы вещей) в зависимости от выбранных типов в первом input checkbox. В разделах PHP не оставили к сожалению ни оного комментария на эту тему. слышал мнение, что эту задачу надо реализовывать на js. я зеленый новичек, на js выполнял только самые стандартные - отбор элементов, событие-действие, присваивание классов и т.д. Подскажите пожалуйста, можно ли реализовать данную задачу на js. и если можно подскажите пожалуйста с какой стороны к этому можно подойти? что можно почитать на эту тематику? спасибо большое !

Добавлено через 57 минут
извиняюсь, "есть одна форма, в ней два input chekbox "....
Ответ: Пифагор, подскажите пожалуйста такой момент (еще один появился)
По выше обсуждаемой теме.

Сам вопрос - я хотел воспользоваться Вашим советом сделать через ajax (с которым пока не знаком)
И подумал, что возможно нужно сначала сделать все на js с использованием нажатия кнопок


Я получил значения отмеченных чекбоксов с помощью js, но теперь мне нужно передать их как параметры отбора при запросе к БД - SELECT * FROM table WHERE .... Есть массив значений чекбоксов, (... , ... , ... ,)но он в javascript, а мне нужен в PHP

То есть нужно передать переменную-массив значений чекбоксов из js в php

Почитал на данном сайте некоторые темы по данному вопросу, и нашел информацию, что сделать это не получится, так как php обработчик уже отработал на сервере, и отправил браузеру уже только html css и js

Чтобы я хотел получить в итоге: чтобы две группы чекбоксов были связаны в одной форме, и для передачи из одной группы чекбоксов данных по которым уже составлять вторую группу чекбоксов (по параметрам полученном из первой группы) - делать это без события нажатия на кнопку. то есть просто проставил некоторые чекбоксы первой группы и автоматом без перезагрузки страницы и нажатия кнопок во второй группе чекбоксов выводились только соответствующие чекбоксы для выбора.

стоит ли мне все таки сначала сделать это все на js с JQUERY и затем попробовать реализовать на ajax или возможно на ajax сделать все это будет проще и сразу лучше взяться за ajax/ Простите, если много и несовсем понятно написал.Спасибо большое!
Вопрос: Checkbox и js, выбор один из двух чекбоксов

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

Смотрел реализованные js скрипты в нете, ставил, но не работало. там как то оборачивают в form и т.д

первый чекбокс
Код HTML5
1
2
3
4
5
6
<input type="checkbox" onclick="document.getElementById('idblock01').style.display='block'; document.getElementById('idblock02').style.display='block'" name="on_etazh" value="Стоимость подъема на этаж мягкой мебели" id="checkboxG1" class="css-checkbox" />
<label for="checkboxG1" class="css-label">Стоимость подъема на этаж мягкой мебели: 150 рублей/этаж</label>
 
появляется два блока при клике на этот чекбокс
<div id="idblock01">цена</div>
<div id="idblock02">кол-во</div>
второй чекбокс
Код HTML5
1
2
3
4
5
6
<input type="checkbox" onclick="document.getElementById('idblock1').style.display='block'; document.getElementById('idblock2').style.display='block'" name="on_etazh" value="Стоимость подъема на этаж матраса" id="checkboxG2" class="css-checkbox" />
<label for="checkboxG2" class="css-label">Стоимость подъема на этаж матраса: 60 рублей/этаж</label>
 
появляется два блока при клике на этот чекбокс
<div id="idblock1">цена</div>
<div id="idblock2">кол-во</div>
на чекбоксах стоит js скрипт, который срабатывает так, если ставим галочку на чекбокс, то вылезает два блока, а если снимаем галочку то он остается, как сделать что бы он так же исчезал.
Ответ:
Сообщение от vl-it
Здравствуйте, есть два чекбокса, надо сделать что бы можно было один из двух выбирать, то есть если стоит галочка на первом, но я выбираю второй, то что бы с первого снималась, ну и на оборот, если стоит галочка на втором, а я выбираю первый, то что бы галочка снималась.
это называется радиокнопка и для этого она и существует. а назначение чекбокса - чтоб можно было выбирать ничего или скокахош.
внешний вид обыгрывается при помощи css
но если условие такое - то делать надо именно радиокнопку
Вопрос: Одновременная работа чекбоксов

День добрый. Подскажите с решением.
Есть два чекбокса, каждый чекбокс при checked выполняет свою функцию, но если нажаты оба то должно выполнятся третья функция myFunc3, ну или как-то прописать в myFunc1() и myFunc2().
Пример:
chek1 и chec2-чекбоксы
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function myFunc1() {//rezult умножаем на 1,3
    if (chek1.checked) {rezult.innerHTML = (rezult.innerHTML * 1.3).toFixed(2);}
    else {rezult.innerHTML = (+rezult).toFixed(2);} 
};
 
function myFunc2() {// к rezult прибавляем s[] по условию
if (chek2.checked){
  if (resultField.innerHTML == counts[0]) {rezult.innerHTML = (+rezult + s[0]).toFixed(2);} 
  else if (resultField.innerHTML == counts[1]) {rezult.innerHTML = (+rezult + s[1]).toFixed(2);} 
  else if (resultField.innerHTML == counts[2]) {rezult.innerHTML = (+rezult + s[2]).toFixed(2);} 
  else if (resultField.innerHTML == counts[3]) {rezult.innerHTML = (+rezult + s[3]).toFixed(2);}
}
};
 
function myFunc3() {// если нажаты оба чекбокса то rezult умножаем на 1,3 и прибавляем значение s[] из myFunc2()
rezult.innerHTML = ((rezult.innerHTML * 1.3)+s[]).toFixed(2);
Ответ: Просто у меня на один чекбокс подключены три функции через addEventListener)), сейчас сделал проще засунул две функции в третью и все, кстати, пока разбирался кучу исправлений сделал))
Вопрос конечно не решен до конца. Есть три пары чекбоксов (chek1-2, chek3-4, chek5-6), каждая пара расположена на слое который появляется при нажатии на кнопку. У чекбоксов настроена блокировка по css т.е. при нажатии на chek1, chek2 нажать нельзя. Все эти чекбоксы (chek1-2, chek3-4, chek5-6) подключают myFunc1(); chek7 подключает myFunc2(); chek8 подключает myFunc3();
Как то так вот))
Вопрос: Обработка 3-х состояний для чекбоксов

Приветствую, подскажите, как мне сделать 3 состояния для чекбокса (checked, uncheked, hover). У меня есть скрипт, но в нем только первые 2, а hover нету, через css hover дописать не получается, т.к. после разового использования тег получает высокоприоритетный styles в строку, который все блокирует и hover через css перестаёт работать.

скрипт чекбокса:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
jQuery(document).ready(function(){
 
jQuery(".niceCheck").mousedown(
/* при клике на чекбоксе меняем его вид и значение */
function() {
 
     changeCheck(jQuery(this));
     
});
 
 
jQuery(".niceCheck").each(
/* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
function() {
     
     changeCheckStart(jQuery(this));
     
});
 
                                        });
 
function changeCheck(el)
/* 
    функция смены вида и значения чекбокса
    el - span контейнер дял обычного чекбокса
    input - чекбокс
*/
{
     var el = el,
          input = el.find("input").eq(0);
     if(!input.attr("checked")) {
        el.css("background-position","0 -60px");    
        input.attr("checked", true)
    } else {
        el.css("background-position","0 0");
        input.attr("checked", false)
    }
    
     return true;
}
 
function changeCheckStart(el)
/* 
    если установлен атрибут checked, меняем вид чекбокса
*/
{
var el = el,
        input = el.find("input").eq(0);
      if(input.attr("checked")) {
        el.css("background-position","0 -60px");    
        }
     return true;
}
Ответ: Mailo, Это делается без скриптов, почитайте про стилизацию чекбоксов.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="checkboxes clearfix">
  <label class="niceCheck">
    <input type="checkbox" name="ch1">
    <span>Эконом</span>
  </label>
  <label class="niceCheck">
    <input type="checkbox" name="ch2">
    <span> Стандарт</span>
  </label>
  <label class="niceCheck">
    <input type="checkbox" name="ch2">
    <span> Премиум</span>
  </label>
</div>
CSS
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
.niceCheck {
  display: block;
  float: left;
  width: 110px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  padding-right: 10px;
}
.niceCheck input{
  display:none;
}
.niceCheck span::before{
  content: '';
  float:left;
  padding-right: 10px;
  height: 30px;
  width: 30px;
  background: url(../images/checkbox.png) no-repeat;
}
.niceCheck:hover span::before{
   background-position: 0 -30px;
}
.niceCheck input:checked + span::before{
   background-position: 0 -60px!important;
}
Вопрос: Динамическое изменение группы активных чекбоксов

Нужно разработать страницу с одной группой радиокнопок и несколькими группами чекбоксов, при этом количество групп чекбоксов должно равняться количеству радиокнопок. В зависимости от выбора той или иной радиокнопки стновится активной соответствующая группа чекбоксов. Неактивный чекбокс - это такой чекбокс, значение которого мы не можем изменить: <input type="checkbox" disabled="true"/>


Есть набросок только интерфейса:
HTML5
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
<html>
<head>
 <link rel="stylesheet" href="new 1.css">
  <meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p><input name="1" type="radio" value="1"> Первая группа</p>
    <p><input name="1" type="radio" value="2"> Вторая группа</p>
    <p><input name="1" type="radio" value="3" checked> Третья группа</p>
 
   <p><input type="checkbox" name="a" value="1"> Опция 1.1</p>
   <p><input type="checkbox" name="a" value="1" checked>Опция 1.2</p>
   
   <p><input type="checkbox" name="a" value="1"> Опция 2.1</p>
   <p><input type="checkbox" name="a" value="1" checked>Опция 2.2</p>
   <p><input type="checkbox" name="a" value="1"> Опция 2.3</p>
   <p><input type="checkbox" name="a" value="1" checked>Опция 2.4</p>
   <p><input type="checkbox" name="a" value="1"> Опция 2.5</p>
   
   
   <p><input type="checkbox" name="a" value="1"> Опция 3.1</p>
   <p><input type="checkbox" name="a" value="1" checked>Опция 3.2</p>
   <p><input type="checkbox" name="a" value="1"> Опция 3.3</p>
  
   
  </form>
 
</body>
</html>
Ответ: Darya1210, странно, что я вчера про Вас забыл... Если конечно ещё актуально... Пример сделан строго на HTML, если необходимо сделать так, как показано на рисунке, то есть динамически менять атрибуты, закину тему в js ...
HTML5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Example</title>
      <style>
        .tabs {
          position: relative;   
          min-height: 200px; /* This part sucks */
          clear: both;
          margin: 25px 0;
        }
        .tab {
          display:block
        }
 
        .tab [type=radio] {
          display: inline-block; 
          margin-top:10px
        }
        .content {
          position: absolute;
          height:200px;
          top: 100px;
          left: 0;
          background: white;
          right: 0;
          bottom: 0;
          padding: 20px;
          border: 1px solid #ccc; 
        }
        [type=radio]:checked ~ label {
          background: white;
          border-bottom: 1px solid white;
          z-index: 2;
        }
        [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }  
    </style>
    </head>
<body>
    <div class="tabs">
        <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Первая группа</label>
           <div class="content">
               <p><input type="checkbox" name="a" value="1"> Опция 1.1</p>
                <p><input type="checkbox" name="a" value="1" checked>Опция 1.2</p>
           </div> 
       </div>
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Вторая группа</label>
           <div class="content">
                <p><input type="checkbox" name="a" value="1"> Опция 2.1</p>
                <p><input type="checkbox" name="a" value="1" checked>Опция 2.2</p>
                <p><input type="checkbox" name="a" value="1"> Опция 2.3</p>
                <p><input type="checkbox" name="a" value="1" checked>Опция 2.4</p>
                <p><input type="checkbox" name="a" value="1"> Опция 2.5</p>
           </div> 
        </div>
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Третья группа</label>
           <div class="content">
                <p><input type="checkbox" name="a" value="1"> Опция 3.1</p>
                <p><input type="checkbox" name="a" value="1" checked>Опция 3.2</p>
                <p><input type="checkbox" name="a" value="1"> Опция 3.3</p>
           </div> 
       </div>
    </div>
</body>
</html>
Вопрос: Как сделать так, чтобы при клике по чекбоксу, выбранная категория отображалась, а остальные при этом скрывались

Всем доброго времени. Прошу помочь со следующей задачей. Пишу вот такой код, при клике по чекбоксу он скрывает или открывает определенную категорию. Как сделать так, чтобы при клике по чекбоксу, выбранная категория отображалась, а остальные при этом скрывались. Всем заранее спасибо.
Javascript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
  function showOrHide(cb, cat) {
    if($('#'+cb).is(':checked')){
        $('.'+cat).show();
    } else {
        $('.'+cat).hide();
    }
  }
</script>
HTML5
1
2
3
4
5
6
7
8
9
10
<div>
  <input type="checkbox" id="cb1" onclick='showOrHide("cb1", "cat1");' />Показать содержимое категории 1<br />
  <input type="checkbox" id="cb2" onclick='showOrHide("cb2", "cat2");' />Показать содержимое категории 2<br />
  <input type="checkbox" id="cb3" onclick='showOrHide("cb3", "cat3");' />Показать содержимое категории 3<br />
</div>
 
<div class="cat1 showhide">Содержимое категории 1</div>
<div class="cat1 showhide">Содержимое категории 1</div>
<div class="cat2 showhide">Содержимое категории 2</div>
<div class="cat3 showhide">Содержимое категории 3</div>
Ответ: Последний пример делает только то, что показывает див, равный по номеру в списке. Т.е. ставим галку на 3 инпуте - показывается третий по счету див сверху. Как привязать инпуты к дивам с отличными друг от друга id? Т.е. по нажатию на определенный чекбокс мне нужно показать все дивы, которые имеют определенный id.

Добавлено через 10 минут
Кто-нибудь знает, как это сделать при вышеупомянутых условиях (при загрузке страницы показать все блоки див, а потом чекбоксами их скрывать и показывать только нужные)? Буду благодарен.