Маркиране и размаркиране на checkbox в таблица

D

d_badboy

Registered
Как като се натисне върху ред от таблица да се маркира checkbox и съответно като се натисне отново да се размаркира ? Когато е маркиран искам реда да е оцветен иначе не.
 
<html>

<head>

<title></title>
<script type="text/javascript">
function swap_color(x){
var pole = document.getElementById(x);
pole.style.backgroundColor = '#FFBEBE';
pole.style.color = '#ff0000';
}
function return_color(x){
var pole = document.getElementById(x);
pole.style.backgroundColor = '#ffffff';
pole.style.color = '#000000';
}
function selectBox(x){
var pole = document.getElementById(x);
var masiv = x.split("_");
var checkbox = document.getElementById("id_"+masiv[1]);
if(checkbox.checked == false)
{
checkbox.checked = true;
}
else
{
checkbox.checked = false;
}
}
</script>
<style type="text/css">
.table {
cursor : pointer ;
}
</style>
</head>

<body>
<table border="1" cellpadding="3" cellspacing="1">
<tr>
<td class="table" id="table_1" onmouseover="swap_color(this.id)" onmouseout="return_color(this.id)" onclick="selectBox(this.id)">Ìîëÿ, èçáåðåòå "À"</td>
</tr>
<tr>
<td id="table_2" onmouseover="swap_color(this.id)" class="table" onmouseout="return_color(this.id)" onclick="selectBox(this.id)">Ìîëÿ, èçáåðåòå "Á"</td>
</tr>
<tr>
<td id="table_3" onclick="selectBox(this.id)" onmouseover="swap_color(this.id)" class="table" onmouseout="return_color(this.id)">Ìîëÿ, èçáåðåòå "Â"</td>
</tr>
<tr>
<form method="post" action="">
<input type="checkbox" id="id_1" />
<input type="checkbox" id="id_2" />
<input type="checkbox" id="id_3" />
</form>
</tr>
</table>
</body>

</html>
Увеличете...
 
Ето още един вариант:
<html>

<head>

<title></title>
<script type="text/javascript">
function selectBox(x){
var pole = document.getElementById(x);
var masiv = x.split("_");
var checkbox = document.getElementById("id_"+masiv[1]);
if(checkbox.checked == false)
{
checkbox.checked = true;
pole.style.backgroundColor = '#FFBEBE';
pole.style.color = '#ff0000';
}
else
{
checkbox.checked = false;
pole.style.backgroundColor = '#ffffff';
pole.style.color = '#000000';
}
}
</script>
<style type="text/css">
.table {
cursor : pointer ;
}
</style>
</head>

<body>
<table border="1" cellpadding="3" cellspacing="1">
<tr>
<td class="table" id="table_1" onclick="selectBox(this.id)">Моля, изберете "А"</td>
</tr>
<tr>
<td class="table" id="table_2" onclick="selectBox(this.id)">Моля, изберете "Б"</td>
</tr>
<tr>
<td class="table" id="table_3" onclick="selectBox(this.id)">Моля, изберете "В"</td>
</tr>
<tr>
<form method="post" action="">
<input type="checkbox" id="id_1" />
<input type="checkbox" id="id_2" />
<input type="checkbox" id="id_3" />
</form>
</tr>
</table>
</body>

</html>
Увеличете...
 
Горните скриптове работят няма спор, но аз бях направил нещо неможе ли да поправите това. Не съм много добър в javascript. Първата финкция работи за оцветяване на реда, но за маркирането на checkbox-а не. Това в случая ще е информация от БД (много редове).
Код: 
<html>
<head>
<title></title>
<script language="Javascript" type="text/javascript">
function check(obj) {
	var tr = obj.parentNode.parentNode;
	tr.style.backgroundColor = (obj.checked) ? "#cccccc" : "";
}
function selectBox(obj) {
    document.getElementsByName(obj).checked = (document.getElementsByName(obj).checked) ? true : false;
}
</script>
</head>
<body>
<form>
<table border="1">
<tr onclick="selectBox(check1)">
    <td><input type="checkbox" name="check1" onclick="check(this)"></td>
    <td>TEXT</td>
</tr>
<tr onclick="selectBox(check2)">
    <td><input type="checkbox" name="check2" onclick="check(this)"></td>
    <td>TEXT</td>
</tr>
<tr onclick="selectBox(check3)">
    <td><input type="checkbox" name="check3" onclick="check(this)"></td>
    <td>TEXT</td>
</tr>
</table>
</form>
</body>
</html>
Нещо по простично и семпло.
 
Невиждам какъв е проблема да ползваш:
if()
{
}
else {
}
Увеличете...
вместо троен оператор!
Същото е!При положение, че скрипта работи както съм ти го дал.......
 
Направих го по този начин. Само така проработи:
Код: 
<html>
<head>
<title></title>
<script language="Javascript" type="text/javascript">
function check(obj) {
	var tr = obj.parentNode.parentNode;
	tr.style.backgroundColor = (obj.checked) ? "#cccccc" : "";
}
function selectBox(obj) {
	var pole = document.getElementById(obj);
    if (document.getElementById("b"+obj).checked) {
    	pole.style.backgroundColor = '';
    	document.getElementById("b"+obj).checked = false;
    } else {
    	pole.style.backgroundColor = '#FFBEBE';
    	document.getElementById("b"+obj).checked = true;
    }
}
</script>

</head>
<body>
<form>
<table border="1">
<tr id="1" onclick="selectBox(this.id)">
    <td><input type="checkbox" name="a1" id="b1" onclick="check(this)" /></td>
    <td width="500">TEXT</td>
</tr>
<tr id="2" onclick="selectBox(this.id)">
    <td><input type="checkbox" name="a2" id="b2" onclick="check(this)" /></td>
    <td width="500">TEXT</td>
</tr>
<tr id="3" onclick="selectBox(this.id)">
    <td><input type="checkbox" name="a3" id="b3" onclick="check(this)" /></td>
    <td width="500">TEXT</td>
</tr>
</table>
</form>
</body>
</html>
Сега пък първата функция не работи. Неможе да се маркират checkbox-овете. Маркират се само като се кликне на ред от таблицата.
 
Ето заповядай:
<html>
<head>
<title></title>
<script language="Javascript" type="text/javascript">
function check(x) {
var obj = document.getElementById(x);
var tr = obj.parentNode.parentNode;
obj.checked = (obj.checked) ? false : true;
tr.style.backgroundColor = (obj.checked) ? '#ffffff' : '#cccccc';
}
function selectBox(y) {
var obj = document.getElementById(y);
var tr = obj.parentNode.parentNode;
obj.checked = (document.getElementById(y).checked) ? false : true;
tr.style.backgroundColor = (obj.checked) ? '#cccccc' : '#ffffff';
}
</script>
</head>
<body>
<form>
<table border="1">
<tr onclick="selectBox('check1')">
<td><input type="checkbox" id="check1" onclick="check(this.id)"></td>
<td>TEXT</td>
</tr>
<tr onclick="selectBox('check2')">
<td><input type="checkbox" id="check2" onclick="check(this.id)"></td>
<td>TEXT</td>
</tr>
<tr onclick="selectBox('check3')">
<td><input type="checkbox" id="check3" onclick="check(this.id)"></td>
<td>TEXT</td>
</tr>
</table>
</form>
</body>
</html>
Увеличете...
МИсля, че това е което искаш! :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе