Трайна смяна на бекграунда на ред при маркиран чекбокс?

sizif · 1 Декември 2007

Здравейте!

Имам чекбоксове, по един на ред.
На всеки ред използвам прелоуд-ефект за смяна на фона:

<TR onmouseover="this.style.backgroundColor='#878787'" onmouseout="this.style.backgroundColor=''">
<TD><INPUT ID="vd1" TYPE="checkbox" NAME="files[]" VALUE="123"></TD>
</TR>

Как може да стане при маркиране на чекбокса, текущия ред на който се намира той да запази onmouseover-ефекта и съответно да го загуби при размаркиране?

Донякъде се справих, но работи дървено, та идеята ми е да се съберат двата ефекта без да се дублират.

Благодаря предварително!

MontefuckeR · 1 Декември 2007

пробвай с цсс. като за всеки чексбокс задаваш различен стил

sizif · 1 Декември 2007

Здравей!

Чекбоксовете са произволен брой, освен това как ще задам да се изпълни един или друг клас от стиловия шаблон при маркиране/размаркиране, ако няма Js, к да отчете събитието?

DJCharge · 2 Декември 2007

Значи искаш нещо като при ABV пощата ?

Код:

<style type="text/css">
.bgrw{background-color:#FFFFFF;}
.bgrz2{background-color:#DFFCED;}


.lineBsz{border-bottom:#B8ECD0 1px solid;}
</style>


<script language="javascript">

var checkflag = "false";

function ch_all(field) {
	if (checkflag == "false") {
	
  	if(field.length == undefined){
      document.getElementById(0).className='bgrz2';
    }
	
		for (i = 0; i < field.length; i++) {
			field[i].checked = true;
			document.getElementById(i).className='bgrz2';
		}
	document.form.all_mid_1.checked = true;
	form.mid.checked = true;
	document.form.all_mid_2.checked = true;
	checkflag = "true";
	} else {
	
  	if(field.length == undefined){
      document.getElementById(0).className='bgrw';
    }
	
		for (i = 0; i < field.length; i++) {
			field[i].checked = false; 
			document.getElementById(i).className='bgrw';
		}
	document.form.all_mid_1.checked = false;
	form.mid.checked = false;
	document.form.all_mid_2.checked = false;
	checkflag = "false";
	}
}

function chSt(val){
  if(document.form.mid[val] == undefined){
    if(val == "0"){
      if(form.mid.checked == true){
        document.getElementById(0).className='bgrz2';
      }
      if(form.mid.checked == false){
        document.getElementById(0).className='bgrw';
      }  
    }
  } else {
  	if(document.form.mid[val].checked == true){
  		document.getElementById(val).className='bgrz2';
  	} 
  	if(document.form.mid[val].checked == false){
  		document.getElementById(val).className='bgrw';
  	}
  }
}

</script>	


<form method="post" name="form" action="">
<table cellspacing="0" cellpadding="0">
 <tr id="0" class="bgrw">
  <td class="lineBsz"><input name="mid" type="checkbox" value="1" onClick="chSt(0)"></td>
  <td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td>
  <td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td>
 </tr>
 <tr id="1" class="bgrw">
  <td class="lineBsz"><input name="mid" type="checkbox" value="2" onClick="chSt(1)"></td>
  <td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td>
  <td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td>
 </tr>
 <tr id="2" class="bgrw">
  <td class="lineBsz"><input name="mid" type="checkbox" value="3" onClick="chSt(2)"></td>
  <td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td>
  <td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td>
 </tr>
</table>
</form>

sizif · 2 Декември 2007

DJCharge!

Да, нещо като в пощата на АБВ, но към тези чекбоксове имам един скрипт за маркиране/размаркиране на всички чекбоксове и се опитвах на базата на него да изградя нещо с бекграунда, но както писах, работеше дървено...
bafitu ми помогна, ето темата:
http://www.web-tourist.net/forum/viewtopic.php?t=27893

Донякъде успях да вържа скрипта, к ми пусна с това, к ползвах досега, но не работят в синхрон

Имаш 1т. за кода!

Довечера ще се опитам да ги вържа, но ми се струва, че скрипта, к ми даде има опция за чекиране на всички или се лъжа?

Ако някой се сеща за решение, ето скриптовете докъдето съм ги докарал (твоя от абв и на bafitu):

<HTML>
<HEAD>

<TITLE>test</TITLE>

<style type="text/css">
.bgrw{background-color:#FFFFFF;}
.bgrz2{background-color:#DFFCED;}

.lineBsz{border-bottom:#B8ECD0 1px solid;}
</style>

<script language="javascript">

var checkflag = "false";

function ch_all(field) {
if (checkflag == "false") {

if(field.length == undefined){
document.getElementById(0).className='bgrz2';
}

for (i = 0; i < field.length; i++) {
field.checked = true;
document.getElementById(i).className='bgrz2';
}
document.form.all_mid_1.checked = true;
form.mid.checked = true;
document.form.all_mid_2.checked = true;
checkflag = "true";
} else {

if(field.length == undefined){
document.getElementById(0).className='bgrw';
}

for (i = 0; i < field.length; i++) {
field.checked = false;
document.getElementById(i).className='bgrw';
}
document.form.all_mid_1.checked = false;
form.mid.checked = false;
document.form.all_mid_2.checked = false;
checkflag = "false";
}
}

function chSt(val){
if(document.form.mid[val] == undefined){
if(val == "0"){
if(form.mid.checked == true){
document.getElementById(0).className='bgrz2';
}
if(form.mid.checked == false){
document.getElementById(0).className='bgrw';
}
}
} else {
if(document.form.mid[val].checked == true){
document.getElementById(val).className='bgrz2';
}
if(document.form.mid[val].checked == false){
document.getElementById(val).className='bgrw';
}
}
}

</script>

<script>
function checkall(formname,checkname,thestate){
var el_collection=eval("document.forms."+formname+"."+checkname)
for (c=0;c<el_collection.length;c++)
el_collection[c].checked=thestate;
var e = document.getElementById('buton');
var e2 = document.getElementById('buton2');
if(thestate == true){
e2.style.display = 'inline';
e.style.display = 'none';
}
else {
e.style.display = 'inline';
e2.style.display = 'none';
}
}
</script>

</HEAD>
<BODY>

<form method="post" name="form" action="">
<table cellspacing="0" cellpadding="0">
<tr onmouseover="this.style.backgroundColor='#DFFCED'" onmouseout="this.style.backgroundColor=''"
id="0" class="bgrw">
<td class="lineBsz"><input ID="mid" NAME="" type="checkbox" value="1" onClick="chSt(0)"></td>
<td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td>
<td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#DFFCED'" onmouseout="this.style.backgroundColor=''"
id="1" class="bgrw">
<td class="lineBsz"><input ID="mid" name="" type="checkbox" value="2" onClick="chSt(1)"></td>
<td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td>
<td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#DFFCED'" onmouseout="this.style.backgroundColor=''"
id="2" class="bgrw">
<td class="lineBsz"><input ID="mid" name="" type="checkbox" value="3" onClick="chSt(2)"></td>
<td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td>
<td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td>
</tr>
</table>

<BR><BR>
<INPUT TYPE="button" NAME="" class='lq' id='buton' VALUE="Chek all" onClick="javascript:checkall('form','mid',true)";>
<INPUT TYPE="button" NAME="" class='lq2' style='display:none' id='buton2' VALUE="UnChek all" onClick="javascript:checkall('form','mid',false)";>

</form>

</BODY>
</HTML>

Name-стойността на чекбокса ми трябва свободна, затова съм преместил стойността, изискуема от скриптовете в ИД-селектор.
Ако е възможно бекграунда на клетките в таблицата също да се задава в ИД-селектор.

Благодаря на всеки, който би се включил!
Прочем точка по тази тема вече няма...

DJCharge · 2 Декември 2007

Ами то и там има опция да маркира всичко

ще го поразгледам кода и ще пробвам и него да взема... :?:

Всъщност аз функцията съм я добавил, но съм забравил да сложа:

<input onClick="this.value=ch_all(this.form.mid);" name="all_mid_1" type="checkbox"> маркирай всички

.. маркирва ги и ги оцветява, но като цъкна пак не ги отмар. и дава error, сега ще погледна къде е проблема и дали не пропускам нещо.

Код:

<style type="text/css"> 
.bgrw{background-color:#FFFFFF;} 
.bgrz2{background-color:#DFFCED;} 


.lineBsz{border-bottom:#B8ECD0 1px solid;} 
</style> 


<script language="javascript"> 

var checkflag = "false"; 

function ch_all(field) { 
   if (checkflag == "false") { 
    
     if(field.length == undefined){ 
      document.getElementById(0).className='bgrz2'; 
    } 
    
      for (i = 0; i < field.length; i++) { 
         field[i].checked = true; 
         document.getElementById(i).className='bgrz2'; 
      } 
   document.form.all_mid_1.checked = true; 
   form.mid.checked = true; 
   document.form.all_mid_2.checked = true; 
   checkflag = "true"; 
   } else { 
    
     if(field.length == undefined){ 
      document.getElementById(0).className='bgrw'; 
    } 
    
      for (i = 0; i < field.length; i++) { 
         field[i].checked = false; 
         document.getElementById(i).className='bgrw'; 
      } 
   document.form.all_mid_1.checked = false; 
   form.mid.checked = false; 
   document.form.all_mid_2.checked = false; 
   checkflag = "false"; 
   } 
} 

function chSt(val){ 
  if(document.form.mid[val] == undefined){ 
    if(val == "0"){ 
      if(form.mid.checked == true){ 
        document.getElementById(0).className='bgrz2'; 
      } 
      if(form.mid.checked == false){ 
        document.getElementById(0).className='bgrw'; 
      }  
    } 
  } else { 
     if(document.form.mid[val].checked == true){ 
        document.getElementById(val).className='bgrz2'; 
     } 
     if(document.form.mid[val].checked == false){ 
        document.getElementById(val).className='bgrw'; 
     } 
  } 
} 

</script>    


<form method="post" name="form" action=""> 
<input onClick="this.value=ch_all(this.form.mid);" name="all_mid_1" type="checkbox"> маркирай всички
<table cellspacing="0" cellpadding="0"> 
 <tr id="0" class="bgrw"> 
  <td class="lineBsz"><input name="mid" type="checkbox" value="1" onClick="chSt(0)"></td> 
  <td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td> 
  <td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td> 
 </tr> 
 <tr id="1" class="bgrw"> 
  <td class="lineBsz"><input name="mid" type="checkbox" value="2" onClick="chSt(1)"></td> 
  <td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td> 
  <td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td> 
 </tr> 
 <tr id="2" class="bgrw"> 
  <td class="lineBsz"><input name="mid" type="checkbox" value="3" onClick="chSt(2)"></td> 
  <td class="lineBsz" colspan="2" nowrap="true" id="noselect"> bla bla</td> 
  <td class="lineBsz" nowrap="true" colspan="2" id="noselect"> - 02.12.07 09:24</td> 
 </tr> 
</table>
<input type="checkbox" name="all_mid_2" onClick="this.value=ch_all(this.form.mid);"> маркирай всички
</form>

Всичко изглежда ОК :?: трябвало е да добавя двата checkbox-а - в началото и края.

mitko876 · 2 Декември 2007

тва е полезно мерси

sizif · 2 Декември 2007

Да и в този си вид е много полезно!

На мен ми трябва бутон, но мисля, че мога да се справя...

Благодаря много!

DJCharge · 2 Декември 2007

Предполагам, че си се справил, но все пак ще обадя начина за другите :lol:

Горния checkbox го правим да не е checkbox а hidden:
<input name="all_mid_1" type="hidden">

Долния го правим да е бутон и му добавяме малко мизерии:
<input type="button" name="all_mid_2" onClick="this.value=ch_all(this.form.mid); value='маркирай всички';" value="маркирай всички">

sizif · 3 Декември 2007

Благодаря!

Не остана време за скрипта, но ще го използвам. Аднах темата в любими, за да не я загубя.
Разбрах една лоша новина и форсирам друг проект

Сигурно ще валят доста въпроси, ама в другия форум

)

Трайна смяна на бекграунда на ред при маркиран чекбокс?

sizif

Registered

MontefuckeR

Registered

sizif

Registered

DJCharge

Registered

sizif

Registered

DJCharge

Registered

mitko876

Registered

sizif

Registered

DJCharge

Registered

sizif

Registered