X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Javascript и checkbox
autotype
autotype
Topic Starter сообщение 3.6.2014, 11:45; Ответить: autotype
Сообщение #1


 Здравствуйте,
помогите нужно при нажатие "выделить все checkbox" выделяло все checkbox и строки заливало в цвет "#33CC00"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>

<script type="text/JavaScript">
<!--
function click_goods(index)
{
  var ckbx="id"+index.toString();
  var tr="tr"+index.toString();
  if ( document.getElementById(ckbx).checked )
  {
    document.getElementById(tr).style.background = '#FFFFFF';
  }
  else
  {
    document.getElementById(tr).style.background="#33CC00";
  }
 
  document.getElementById(ckbx).checked=!document.getElementById(ckbx).checked;
 
}

//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr onclick="click_goods(1);" id="tr1">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id1" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(2);" id="tr2">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id2" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(3);" id="tr3">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id3" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<input type="checkbox" name="all" value="checkbox" onClick="click_goods('all');">выделить все checkbox
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kamchatniyoleg
kamchatniyoleg
сообщение 3.6.2014, 16:15; Ответить: kamchatniyoleg
Сообщение #2 



function CheckAll(chall, ch) {
    if (!$(chall).is(":checked")) {
        $(ch).prop("checked", true)
    } else {
        $(ch).prop("checked", false)
    }
}

а это цепляем на чексбокс

onclick="CheckAll('#checkboxG1', '.check1')"

где checkboxG1 - это ID главного чекбокса , а check1 - это класс остальных чекбоксов которые выделяем

если не разберетесь - с работы приду сделаем )


Сообщение отредактировал kamchatniyoleg - 3.6.2014, 16:19
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
autotype
autotype
Topic Starter сообщение 5.6.2014, 18:49; Ответить: autotype
Сообщение #3


вроде сделал все правильно, не работает 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>

<script type="text/JavaScript">
<!--
function click_goods(index)
{
  var ckbx="id"+index.toString();
  var tr="tr"+index.toString();
  if ( document.getElementById(ckbx).checked )
  {
    document.getElementById(tr).style.background = '#FFFFFF';
  }
  else
  {
    document.getElementById(tr).style.background="#33CC00";
  }
 
  document.getElementById(ckbx).checked=!document.getElementById(ckbx).checked;
 
}
function CheckAll(chall, ch) {
    if (!$(chall).is(":checked")) {
        $(ch).prop("checked", true)
    } else {
        $(ch).prop("checked", false)
    }
}

//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr onclick="click_goods(1);" id="tr1">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id1" class="check1" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(2);" id="tr2">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id2" class="check1"/></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(3);" id="tr3">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id3" class="check1" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<input type="checkbox" name="all" value="checkbox" onclick="CheckAll('#checkboxG1', '.check1')" id="checkboxG1">выделить все checkbox
</body>
</html>






function CheckAll(chall, ch) {
    if (!$(chall).is(":checked")) {
        $(ch).prop("checked", true)
    } else {
        $(ch).prop("checked", false)
    }
}

а это цепляем на чексбокс



onclick="CheckAll('#checkboxG1', '.check1')"

где checkboxG1 - это ID главного чекбокса , а check1 - это класс остальных чекбоксов которые выделяем

если не разберетесь - с работы приду сделаем )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kamchatniyoleg
kamchatniyoleg
сообщение 6.6.2014, 9:49; Ответить: kamchatniyoleg
Сообщение #4


Вот вам - забыли JQUERY библиотеку подключить 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/JavaScript">
<!--
function click_goods(index)
{
  var ckbx="id"+index.toString();
  var tr="tr"+index.toString();
  if ( document.getElementById(ckbx).checked )
  {
    document.getElementById(tr).style.background = '#FFFFFF';
  }
  else
  {
    document.getElementById(tr).style.background="#33CC00";
  }
 
  document.getElementById(ckbx).checked=!document.getElementById(ckbx).checked;
 
}
function CheckAll(chall, ch) {
    if (!$(chall).is(":checked")) {
        $(ch).prop("checked", false)
    } else {
        $(ch).prop("checked", true)
    }
}

//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr onclick="click_goods(1);" id="tr1">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id1" class="check1" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(2);" id="tr2">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id2" class="check1"/></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(3);" id="tr3">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id3" class="check1" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<input type="checkbox" name="all" value="checkbox" onclick="CheckAll('#checkboxG1', '.check1')" id="checkboxG1">выделить все checkbox
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
autotype
autotype
Topic Starter сообщение 6.6.2014, 13:15; Ответить: autotype
Сообщение #5


весь прикол в том что хочу без JQUERY
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kamchatniyoleg
kamchatniyoleg
сообщение 6.6.2014, 14:45; Ответить: kamchatniyoleg
Сообщение #6


[member=кипятильник],  Зачем изобретать трудности , объясните пожалуйста .

Сейчас его не то что нужно использовать , а я бы сказал необходимо ! Зачем возвращаться в 2008 год ? 


Сообщение отредактировал kamchatniyoleg - 6.6.2014, 14:46
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
autotype
autotype
Topic Starter сообщение 10.6.2014, 11:23; Ответить: autotype
Сообщение #7


да просто там кода нужно на пару строк,
а по поводу JQUERY я не могу понять зачем он когда можно использовать все компактно
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kamchatniyoleg
kamchatniyoleg
сообщение 10.6.2014, 11:25; Ответить: kamchatniyoleg
Сообщение #8


[member=кипятильник], А разницы ? Библиотека JQUERY подгружаеться моментально ( можете с гугл серверов грузить ) . Также огромны возможности открываются для вас . Я к тому что нужно не стоять на месте !  
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
autotype
autotype
Topic Starter сообщение 10.6.2014, 15:48; Ответить: autotype
Сообщение #9


ок, спасибо наверное тогда закажу книгу :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
maronez
maronez
сообщение 10.6.2014, 15:53; Ответить: maronez
Сообщение #10


JQuery здесь абсолютно не к месту, его нужно использовать с умом а не тулить везде куда только можно

Автор, попробуйте так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>

<script type="text/JavaScript">
<!--
function click_goods(index)
{
  var ckbx="id"+index.toString();
  var tr="tr"+index.toString();
  if ( document.getElementById(ckbx).checked )
  {
    document.getElementById(tr).style.background = '#FFFFFF';
  }
  else
  {
    document.getElementById(tr).style.background="#33CC00";
  }
 
  document.getElementById(ckbx).checked=!document.getElementById(ckbx).checked;
 
}

function checkAll(self, containerId)
{
	var i, elements = document.getElementById(containerId).getElementsByTagName("input");

	for(i = 0; i < elements.length; i++)
	{
		// проверка на тот случай если будут и други элементы напрмер type=text
		if(elements[i].type === "checkbox")
		{
			elements[i].checked = self.checked;
		}
	}
}

//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr onclick="click_goods(1);" id="tr1">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id1" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(2);" id="tr2">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id2" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr onclick="click_goods(3);" id="tr3">
      <td width="100" height="30"><input type="checkbox" name="id[]" id="id3" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<input type="checkbox" name="all" value="checkbox" onClick="checkAll(this, 'form1');">выделить все checkbox
</body>
</html>

Надеюсь правильно понял идею, думаю как поменять класс стиля сами разберетесь.


Используйте делегирование: http://learn.javascript.ru/event-delegation вместо назначений onclick обработчиков для каждого элемента так код будет проще, короче и более гибким.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
 0 alexey 1246 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
 56 qpPeW 44948 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
 1 byteeightlab 1473 2.7.2019, 7:37
автор: ychervov
Открытая тема (нет новых ответов) Дополнительный доход по Вашему трафику - JavaScript майнинг
 6 GridCash 2713 22.4.2018, 20:30
автор: -GridCash-
Открытая тема (нет новых ответов) JumPic.ru - новый сервис уникальной тизерной и баннерной рекламы без javascript
Рекламный код без javascript - 100% защита от вирусов
 3 Shoker 3715 1.4.2018, 18:36
автор: Shoker


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 26.4.2024, 1:37

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet