Jag hittade detta ett script för att få grafiska checkboxar. Nu vill jag komplicera det lite och kunna byta bakgrundsfärg på en "tillhörande" textbox när man klickar i/ur en checkbox. Jag har försökt att beskriva hur jag menar lite bättre i koden nedan! OBS mitt formulär är dynamiskt så det kan bli fler än två boxar!!
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!
<input type="hidden" name="mycheckbox" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox,document['checkbox1'],'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox,document['checkbox2'],'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och
får användas fritt så länge som dessa rader står kvar. */
Kommer samtliga dina checkboxar att vara kopplade till samma hidden-fält — radio-knappssimulering med andra ord? Eller skall du ha ett hidden-fält för varje checkbox?
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!
<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */
function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
if(document.images){
imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
}
var elm = document.myForm.elements["textID_" + id];
elm.style.backgroundColor = elm.style.backgroundColor != "#eee" ? "#eee" : "#fff";
}
</script>
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!
<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
<a href="#" onClick="ucc()">Check/Uncheck all</a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */
function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
if(document.images){
imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
}
var elm = document.myForm.elements["textID_" + id];
elm.style.backgroundColor = elm.style.backgroundColor == "#eee" ? "#fff" : "#eee";
}
function ucc(){
var elms = document.myForm.elements,
tmp = null;
for (var i = 1; (elm = elms["mycheckbox" + i]); ++i){
gfxCheckboxToggle(elm, document['checkbox' + i], 'off.gif', 'on.gif', i);
}
}
</script>
Tackar!
Funkade nästan perfekt. Ett problem är att alla boxar som är checked blir unchecked och alla som är unchecked blir checked när klickar på länken. Hoppas du förstår hur jag menar?
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!
<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
<a href="#" onClick="checkAll(true)">Check all</a><a href="#" onClick="checkAll(false)">Uncheck all</a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */
function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
if(document.images){
imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
}
var elm = document.myForm.elements["textID_" + id];
elm.style.backgroundColor = elm.style.backgroundColor != "#eeeeee" ? "#eeeeee" : "#ffffff";
}
function checkAll(b){
var elms = document.myForm.elements;
for (var i = 0; i < elms.length; ++i){
if (/^mycheckbox\d+$/.test(elms[i].name)){
elms[i].value = b * 1;
} else if (/^textID_(\d+)$/.test(elms[i].name)){
elms[i].style.backgroundColor = b ? "#eeeeee" : "#ffffff";
document['checkbox' + RegExp.$1].src = b ? "on.gif" : "off.gif";
}
}
}
</script>
Nu fick du visst både en 'Check all'- och 'Uncheck all'-knapp.
Jag har fått ett problem! Eftersom formuläret med alla dessa checkboxar skall kunna editeras kommer en del av checkboxarna vara checked och en del unchecked när sidan skrivs ut. Det verkar som att detta kan ställa till problem och felet jag får är,
När jag har olika värden i minna hidden fält, exempel:
Visas fel bild (värde och bakgrundsfärgen är rätt!) på den grafiska checkboxen på den som har värde 1.
Om jag går in och ändrar den här raden imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
och byter värdet till 0 blir problemet tvärtom (alltså fel bild visas på den grafiska checkboxen på den som har värde 0).
Hantera detta problem när du skriver ut sidan med serverspråket. Om t.ex. "mycheckbox2" ovan skall ha värdet 1 när sidan laddats ändrar du dels tillhörande bildkälla till "on.gif", dels tillhörande textbox bakgrundsfärg:
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20" style="background-color:#eeeeee"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!
<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="1">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="on.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
<a href="#" onClick="checkAll(true)">Check all</a><a href="#" onClick="checkAll(false)">Uncheck all</a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */
function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
if(document.images){
imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
}
var elm = document.myForm.elements["textID_" + id];
elm.style.backgroundColor = elm.style.backgroundColor != "#eeeeee" ? "#eeeeee" : "#ffffff";
}
function checkAll(b){
var elms = document.myForm.elements;
for (var i = 0; i < elms.length; ++i){
if (/^mycheckbox\d+$/.test(elms[i].name)){
elms[i].value = b * 1;
} else if (/^textID_(\d+)$/.test(elms[i].name)){
elms[i].style.backgroundColor = b ? "#eeeeee" : "#ffffff";
document['checkbox' + RegExp.$1].src = b ? "on.gif" : "off.gif";
}
}
}
</script>
Jag har redan gjort så som du säger men problemet blir:
När sidan skrivs ut stämmer allt och jag kan checka i och ur boxarna hur jag vill och allt funkar som det ska nästan!
Problemet är på dom boxarna som är checked. Därför att om jag vill vill checka ur en då ändras färgen och värdet (i hidden-fältet) men inte bilden? Klickar jag två gånger då ändras bilden, men då har jag fel bild i förhållande till färgen och värdet.
Detta gäller bara dom boxarna som är checked när jag skriver ut sidan. Dom boxarna som är unchecked funkar som dom ska!
Detta blev rörigt värre, men jag hoppas du förstår hur jag menar?
Felet var att jag hade fått till det så att bildern skiftade även i den här kod-raden: <a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"> :r
Nu tänkte jag krångla till det lite ytterligare :)
Jag skulle villja att texten är "bold" när en checkbox är "unchecked" jag provade att lägga till den nedersta raden i koden nedan, vilket förstås inte funkade....
