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


Партнерская программа Kredov

Javascript и checkbox

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

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

Отправлено 03 Июнь 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

#2 kamchatniyoleg

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

Отправлено 03 Июнь 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 Июнь 2014 - 15:19

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


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

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

Отправлено 05 Июнь 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
  • 1 178 сообщений
  • Репутация: 84

Отправлено 06 Июнь 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 Июнь 2014 - 12:15

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


  • 0

#6 kamchatniyoleg

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

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

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

 

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


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

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


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

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

Отправлено 10 Июнь 2014 - 10:23

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


  • 0

#8 kamchatniyoleg

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

Отправлено 10 Июнь 2014 - 10:25

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


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


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

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

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

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


  • 0

#10 maronez

maronez
  • Пользователь
  • 2 сообщений
  • Репутация: 0

Отправлено 10 Июнь 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
  • 2 652 сообщений
  • Репутация: 85


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