Witam chce zrobić, aby po kliknięciu w kolumnę podświetlała się i byla zaznaczona. Tak jak checkbox.
Chodzi mi o taki rezultat:
https://i.ibb.co/nwT5b4R/tabela.png
0
0
** https://jsfiddle.net/aptz214c/ **- czy o takie coś Ci chodziło?
Oczywiście, można to wszystko dopieścić, tutaj jest jedynie pokazane, w jaki sposób możesz podejść do tematu ;)
<div class="podswietl_mnie" onclick="wcisnieto(this)">
Poczta<br>12 zł
</div>
.podswietl_mnie {
width: 130px;
height: 50px;
background-color: yellow;
font-size: 16px;
text-align: center;
padding-top: 15px;
border: 2px solid yellow;
}
function wcisnieto(element) {
if (element.style.border== '2px solid red') element.style.border= '2px solid yellow'
else element.style.border= '2px solid red';
}
0
cerrato napisał(a):
** https://jsfiddle.net/aptz214c/ **- czy o takie coś Ci chodziło?
Oczywiście, można to wszystko dopieścić, tutaj jest jedynie pokazane, w jaki sposób możesz podejść do tematu ;)
Dziękuje bardzo :)
1
Ale po co JS?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#_przelacznik {
display:block;
width:30px;
height:30px;
border:1px solid green;
}
#przelacznik {
display:none;
}
INPUT[type="checkbox"]:checked + LABEL {
background-color:#84BC3D;
}
</style>
</head>
<body>
<table border=1>
<tr>
<td>
<input id="przelacznik" type="checkbox">
<label for="przelacznik" id="_przelacznik"> </label>
</td>
<td>kliknij w zielonej ramce</td>
</tr>
</table>
</body>
</html>
0
Jakbym mógł dodać, że jeśli 1 element jest zaznaczony to drugiego już nie można ? Dopóki się nie odznaczy tamtego ?
No to musisz zrobić jakieś pilnowanie stanów. Albo wprowadzić dodatkowe zmienne, które będą "pamiętać" dokonany wybór, albo podczas każdego kliknięcia sprawdzać stan pozostałych ramek i jeśli jakaś jest zaznaczona, to trzeba ją odhaczyć. @Freja Draco - m.in. dlatego skorzystanie z JS jest dobrym pomysłem :P
1
cerrato napisał(a):
Jakbym mógł dodać, że jeśli 1 element jest zaznaczony to drugiego już nie można ? Dopóki się nie odznaczy tamtego ?
No to musisz zrobić jakieś pilnowanie stanów. Albo wprowadzić dodatkowe zmienne, które będą "pamiętać" dokonany wybór, albo podczas każdego kliknięcia sprawdzać stan pozostałych ramek i jeśli jakaś jest zaznaczona, to trzeba ją odhaczyć. @Freja Draco - m.in. dlatego skorzystanie z JS jest dobrym pomysłem :P
A radio to już nie działa?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
._przelacznik {
display:block;
width:30px;
height:30px;
border:1px solid green;
}
.przelacznik {
display:none;
}
INPUT[type="radio"]:checked + LABEL {
background-color:#84BC3D;
}
</style>
</head>
<body>
<table border=1>
<tr>
<td>
<input id="przelacznik_1" class="przelacznik" type="radio" name="gender" value="male">
<label for="przelacznik_1" class="_przelacznik"></label>
</td>
<td>male</td>
</tr>
<tr>
<td>
<input id="przelacznik_2" class="przelacznik" type="radio" name="gender" value="female">
<label for="przelacznik_2" class="_przelacznik"></label>
</td>
<td>female</td>
</tr>
<tr>
<td>
<input id="przelacznik_3" class="przelacznik" type="radio" name="gender" value="x">
<label for="przelacznik_3" class="_przelacznik"></label>
</td>
<td>x</td>
</tr>
</table>
</body>
</html>
1
to jeszcze pokaż mi, jak można wszystkie opcje "odkliknąć" :P - @cerrato
Proszę:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.klikacz {
display:block;
width:30px;
height:30px;
}
.zaznaczalny {
border:1px solid green;
}
.przelacznik {
display:none;
}
INPUT[type="radio"]:checked + LABEL.zaznaczalny {
background-color:#84BC3D;
}
</style>
</head>
<body>
<table border=1>
<tr>
<td>
<input id="przelacznik_1" class="przelacznik" type="radio" name="gender" value="male">
<label for="przelacznik_1" class="klikacz zaznaczalny"></label>
</td>
<td>male</td>
</tr>
<tr>
<td>
<input id="przelacznik_2" class="przelacznik" type="radio" name="gender" value="female">
<label for="przelacznik_2" class="klikacz zaznaczalny"></label>
</td>
<td>female</td>
</tr>
<tr>
<td>
<input id="przelacznik_3" class="przelacznik" type="radio" name="gender" value="x">
<label for="przelacznik_3" class="klikacz zaznaczalny"></label>
</td>
<td>x</td>
</tr>
<tr>
<td>
<input id="przelacznik_4" class="przelacznik" type="radio" name="gender" value="-">
<label for="przelacznik_4" class="klikacz"></label>
</td>
<td>odkliknij wszystkie opcje</td>
</tr>
</table>
</body>
</html>