Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


Javascript и checkbox

#1 кипятильник

кипятильник
  • Неактивные
  • 102 сообщений
  • Репутация: 0
0

Отправлено 03 June 2014 - 10:45

 Здравствуйте,

помогите нужно при нажатие "выделить все 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

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как поместить в значение формы переменную JavaScript?
  2. Checkbox и PHP
  3. Управление активностью (enable) кнопки (submit)
  4. Не получается сделать флажки, пожалуйста поделитесь опытом.
  5. Вопрос по JS и jQuery - теория и практика

#2 kamchatniyoleg

kamchatniyoleg
  • Пользователь PRO
  • 1178 сообщений
  • Репутация: 84

Отправлено 03 June 2014 - 15:15

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: 03 June 2014 - 15:19

  • 0
Сервис электронного информирования клиентов PostTrail.ru
Отслеживание посылок Почты России в автоматическом режиме! Лояльность клиента - прибыль магазина!


#3 кипятильник

кипятильник
    Topic Starter
  • Неактивные
  • 102 сообщений
  • Репутация: 0

Отправлено 05 June 2014 - 17:49

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

<!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 - это класс остальных чекбоксов которые выделяем

 

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

 


  • 0

#4 kamchatniyoleg

kamchatniyoleg
  • Пользователь PRO
  • 1178 сообщений
  • Репутация: 84

Отправлено 06 June 2014 - 08:49

Вот вам - забыли 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>

  • 0
Сервис электронного информирования клиентов PostTrail.ru
Отслеживание посылок Почты России в автоматическом режиме! Лояльность клиента - прибыль магазина!


#5 кипятильник

кипятильник
    Topic Starter
  • Неактивные
  • 102 сообщений
  • Репутация: 0

Отправлено 06 June 2014 - 12:15

весь прикол в том что хочу без JQUERY


  • 0

#6 kamchatniyoleg

kamchatniyoleg
  • Пользователь PRO
  • 1178 сообщений
  • Репутация: 84

Отправлено 06 June 2014 - 13:45

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

 

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


Сообщение отредактировал kamchatniyoleg: 06 June 2014 - 13:46

  • 0
Сервис электронного информирования клиентов PostTrail.ru
Отслеживание посылок Почты России в автоматическом режиме! Лояльность клиента - прибыль магазина!


#7 кипятильник

кипятильник
    Topic Starter
  • Неактивные
  • 102 сообщений
  • Репутация: 0

Отправлено 10 June 2014 - 10:23

да просто там кода нужно на пару строк,
а по поводу JQUERY я не могу понять зачем он когда можно использовать все компактно


  • 0

#8 kamchatniyoleg

kamchatniyoleg
  • Пользователь PRO
  • 1178 сообщений
  • Репутация: 84

Отправлено 10 June 2014 - 10:25

кипятильник, А разницы ? Библиотека JQUERY подгружаеться моментально ( можете с гугл серверов грузить ) . Также огромны возможности открываются для вас . Я к тому что нужно не стоять на месте !  


  • 0
Сервис электронного информирования клиентов PostTrail.ru
Отслеживание посылок Почты России в автоматическом режиме! Лояльность клиента - прибыль магазина!


#9 кипятильник

кипятильник
    Topic Starter
  • Неактивные
  • 102 сообщений
  • Репутация: 0

Отправлено 10 June 2014 - 14:48

ок, спасибо наверное тогда закажу книгу :)


  • 0

#10 maronez

maronez
  • Неактивные
  • 2 сообщений
  • Репутация: 0

Отправлено 10 June 2014 - 14:53

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.javascr...vent-delegation вместо назначений onclick обработчиков для каждого элемента так код будет проще, короче и более гибким.


  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru