?
Solved

Change Checkbox CSS Style

Posted on 2009-12-16
18
Medium Priority
?
1,178 Views
Last Modified: 2012-05-08
All,

I have the attached code snippet where a category checkbox is checked if all items underneath it are checked. How can I modify the code such that:

1. If any checkbox underneath any category is checked, the CSS Style of it's parent "Category" checkbox should look greyed out. (I do not want to disable the checkbox. Just look grey or any color through CSS). This will denote some items are checked if the category is collapsed.

2. If all items are checked underneath a category, then the checkbox doesn't have to look greyed out as it will be checked too.

All the existing code functionality should be maintained as it works great..

Any suggestions,
Thanks
<html>
<head>

<script src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

<script language="JavaScript">
function toggleTableRows()
{
  $(document).ready(function() {
    $('img.parent')
      .css("cursor","pointer")
      .toggle(
        function() {
          $(this).attr("title","Click to Expand")
          $(this).attr("src","arrow_collapsed.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        },
        function() {
          $(this).attr("title","Click to Collapse");
          $(this).attr("src","arrow_expanded.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        }
      ); 
    initCheckBoxes();
  });
} 
function toggleCheckboxes(current, form, field) {
  $(document).ready(function() {
    $("#"+ form +" :checkbox[name^='"+ field +"[']")
      .attr("checked", current.checked);
  });
} 
function toggleParentCheckboxes(current, form) {        
  var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length == 
                $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
  // replace '[anything]' with '' instead of just '[]'
  $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
    .attr("checked", checked);
} 
function initCheckBoxes(form) {
  $("#"+ form +" :checkbox:checked").each(function() {
    if (this.name.match(/chk[0-9]\[.*\]/)) {
      toggleParentCheckboxes(this, form);
    }
  });
}
</script>
<script language="JavaScript">toggleTableRows();</script>
  <style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>

<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
    <td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
    <td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Apple</td>
    <td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Banana</td>
    <td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Orange</td>
    <td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
    <td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
    <td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Eggplant</td>
    <td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Tomato</td>
    <td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Cabbage</td>
    <td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

Open in new window

0
Comment
Question by:Kratos101
  • 9
  • 9
18 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 26067763
Noticed that I added tbody to group the sections of your table:
<html>
<head>

<script src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

<script language="JavaScript">
function toggleTableRows()
{
  $(document).ready(function() {
    $('img.parent')
      .css("cursor","pointer")
      .toggle(
        function() {
          $(this).attr("title","Click to Expand")
          $(this).attr("src","arrow_collapsed.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        },
        function() {
          $(this).attr("title","Click to Collapse");
          $(this).attr("src","arrow_expanded.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        }
      ); 
    initCheckBoxes();
  });
} 
function toggleCheckboxes(current, form, field) {
  $(document).ready(function() {
    $("#"+ form +" :checkbox[name^='"+ field +"[']")
      .attr("checked", current.checked);
  });
} 

function toggleParentCheckboxes(current, form) {


  var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length == 
                $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;

if(checked)
{
	$( ":checkbox:eq(0)", $(current).closest("tbody")).css({"background-color":"gray"});
}
else
{
	$( ":checkbox:eq(0)", $(current).closest("tbody")).css({"background-color":"white"});
}

  // replace '[anything]' with '' instead of just '[]'
  $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
    .attr("checked", checked);
} 
function initCheckBoxes(form) {
  $("#"+ form +" :checkbox:checked").each(function() {
    if (this.name.match(/chk[0-9]\[.*\]/)) {
      toggleParentCheckboxes(this, form);
    }
  });
}
</script>
<script language="JavaScript">toggleTableRows();</script>
  <style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>

<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tbody>
<tr>
    <td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
    <td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/>c</td>
</tr>
<tr class="c1" id="child-0">
    <td>Apple</td>
    <td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Banana</td>
    <td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Orange</td>
    <td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</tbody>

<tbody>
<tr>
    <td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
    <td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/>c</td>
</tr>

<tr class="c1" id="child-1">
    <td>Eggplant</td>
    <td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Tomato</td>
    <td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Cabbage</td>
    <td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:Kratos101
ID: 26068315
I think I understamd what you are doing, but it's not working...  I just want the checbox css changed... not tbody !

Thanks
0
 
LVL 82

Expert Comment

by:hielo
ID: 26072002
I added the tbody because:
IMHO it makes the syntax simpler. I it bothers you that much, then try:
if(checked)
{
        //$( ":checkbox:eq(0)", $(current).closest("tbody")).css({"background-color":"gray"});
       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"gray"});
}
else
{
        //$( ":checkbox:eq(0)", $(current).closest("tbody")).css({"background-color":"white"});
       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"white"});
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Kratos101
ID: 26073577
Hello Hielo !

Thanks for the answer.. It doesn't seem to be changing the CSS of the checkbox... Can you please try out the entire code in the browser and check?

Thanks
<html>
<head>

<script src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

<script language="JavaScript">
function toggleTableRows()
{
  $(document).ready(function() {
    $('img.parent')
      .css("cursor","pointer")
      .toggle(
        function() {
          $(this).attr("title","Click to Expand")
          $(this).attr("src","arrow_collapsed.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        },
        function() {
          $(this).attr("title","Click to Collapse");
          $(this).attr("src","arrow_expanded.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        }
      ); 
    initCheckBoxes("frmDinnerMenu");
  });
} 
function toggleCheckboxes(current, form, field) {
  $(document).ready(function() {
    $("#"+ form +" :checkbox[name^='"+ field +"[']")
      .attr("checked", current.checked);
  });
} 
function toggleParentCheckboxes(current, form) {        
  var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length == 
                $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;

	if(checked)
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"red"});
	}
	else
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"white"});
	}
  // replace '[anything]' with '' instead of just '[]'
  $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
    .attr("checked", checked);
} 
function initCheckBoxes(form) {
  $("#"+ form +" :checkbox:checked").each(function() {
    if (this.name.match(/chk[0-9]\[.*\]/)) {
      toggleParentCheckboxes(this, form);
    }
  });
}
</script>
<script language="JavaScript">toggleTableRows();</script>
  <style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>

<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
    <td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
    <td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Apple</td>
    <td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Banana</td>
    <td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Orange</td>
    <td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
    <td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
    <td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Eggplant</td>
    <td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Tomato</td>
    <td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Cabbage</td>
    <td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 26073713
>>the CSS of the checkbox
What do you mean by that? You can change the background color on a TEXT box, but not on a checkbox. What you can do is change the background of the element on which the checkbox is located.

Other than that, after a closer look at your question, I see "..If any checkbox underneath any category is checked".
so change line 42:
if(checked)

to:
if( !checked )
0
 

Author Comment

by:Kratos101
ID: 26074924
Hi Hielo !

By CSS of the checkbox, I meant that:

1. When some items under a category are checked,  and if the category is collapsed, the user doesn't know if any items under the category are checked.  Hence, to provide a visual indication that some items are checked underneath a category, I am looking into modifying the style of the "Category" checkbox. This can be a "border:1px; background-color:red" or some thing like that.

Thanks.
0
 
LVL 82

Expert Comment

by:hielo
ID: 26075197
I said:
change line 42:
if(checked)

to:
if( !checked )

did you?
0
 

Author Comment

by:Kratos101
ID: 26075221
yes I did.. Sorry to say, but still doesn't work.. If you have a screenshot of this stuff working on your end, please attach it..

Thanks !
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 26075304
>>screenshot
screenshot==image. An image of my highlighted checkbox bg is not going to help you. What you need is the code :)
<html>
<head>

<script src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

<script language="JavaScript">
function toggleTableRows()
{
  $(document).ready(function() {


    $('img.parent')
      .css("cursor","pointer")
      .toggle(
        function() {
          $(this).attr("title","Click to Expand")
          $(this).attr("src","arrow_collapsed.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        },
        function() {
          $(this).attr("title","Click to Collapse");
          $(this).attr("src","arrow_expanded.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        }
      ); 
    initCheckBoxes("frmDinnerMenu");


  });

} 
function toggleCheckboxes(current, form, field) {
  $(document).ready(function() {
    $("#"+ form +" :checkbox[name^='"+ field +"[']")
      .attr("checked", current.checked);
  });
} 
function toggleParentCheckboxes(current, form) {
  var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length == 
                $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;

	if(!checked)
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"red"});
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"color":"red"});
	}
	else
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"white"});
	}
  // replace '[anything]' with '' instead of just '[]'
  $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
    .attr("checked", checked);
} 
function initCheckBoxes(form) {
  $("#"+ form +" :checkbox:checked").each(function() {
    if (this.name.match(/chk[0-9]\[.*\]/)) {
      toggleParentCheckboxes(this, form);
    }
  });
}
</script>
<script language="JavaScript">toggleTableRows();</script>
<style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>

<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
    <td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
    <td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Apple</td>
    <td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Banana</td>
    <td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Orange</td>
    <td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
    <td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
    <td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Eggplant</td>
    <td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Tomato</td>
    <td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Cabbage</td>
    <td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:Kratos101
ID: 26075377
Thank you...This works great in Internet explorer and I will give you points for that..

 Is it possible to make it work for firefox ? Please... :)
0
 

Author Comment

by:Kratos101
ID: 26075449
Also, I noticed one bug.. After the page loads, in the second category, if you uncheck all the checkboxes, we still see the background-color as red.

Thanks
0
 
LVL 82

Expert Comment

by:hielo
ID: 26075494
I'll look into this with FF. I need to leave for a few mins...
0
 

Author Comment

by:Kratos101
ID: 26075590
okay.. I fixed the bugs I found.. Following is the modified code..  All we need now is to make it to work in Firefox and other Mozilla based browsers..

Thanks
<html>
<head>

<script src="http://www.google.com/jsapi"></script>

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

<script language="JavaScript">
function toggleTableRows()
{
  $(document).ready(function() {


    $('img.parent')
      .css("cursor","pointer")
      .toggle(
        function() {
          $(this).attr("title","Click to Expand")
          $(this).attr("src","arrow_collapsed.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        },
        function() {
          $(this).attr("title","Click to Collapse");
          $(this).attr("src","arrow_expanded.gif");
          $('tr').siblings('#child-'+this.id).toggle();
        }
      ); 
    initCheckBoxes("frmDinnerMenu");


  });

} 
function toggleCheckboxes(current, form, field) {
  $(document).ready(function() {
    $("#"+ form +" :checkbox[name^='"+ field +"[']")
      .attr("checked", current.checked);
  });
} 
function toggleParentCheckboxes(current, form) {
  var totalCheckboxes = $("#"+ form +" :checkbox[name='"+ current.name +"']").length;
  var numChecked = $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
  var checked = (totalCheckboxes == numChecked );
    if(numChecked !=0 && (totalCheckboxes!=numChecked))
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"red"});
	}
	else
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"white"});
	}
  // replace '[anything]' with '' instead of just '[]'
  $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
    .attr("checked", checked);
} 
function initCheckBoxes(form) {
  $("#"+ form +" :checkbox:checked").each(function() {
    if (this.name.match(/chk[0-9]\[.*\]/)) {
      toggleParentCheckboxes(this, form);
    }
  });
}
</script>
<script language="JavaScript">toggleTableRows();</script>
<style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>

<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
    <td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
    <td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Apple</td>
    <td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Banana</td>
    <td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
    <td>Orange</td>
    <td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
    <td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
    <td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Eggplant</td>
    <td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Tomato</td>
    <td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
    <td>Cabbage</td>
    <td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 26076056
do you have a link to your page? I don't have the arrow images so FF is not giving a "clickable" image/area.
0
 

Author Comment

by:Kratos101
ID: 26076257
I don't have a link to the page, but please find the attached images.

Thanks
arrow-collapsed.gif
arrow-expanded.gif
0
 
LVL 82

Expert Comment

by:hielo
ID: 26076578
change:
if(numChecked !=0 && (totalCheckboxes!=numChecked))
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"red"});
	}
	else
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"background-color":"white"});
	}

to:
    if(numChecked !=0 && (totalCheckboxes!=numChecked))
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").parent().css({"background-color":"red"});
	}
	else
	{
	       $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").parent().css({"background-color":"white"});
	}

Open in new window

0
 

Author Comment

by:Kratos101
ID: 26076674
hmm.. okay.. I changed the "Opacity" property and it looks okay.. That's the closest I could get for what I want... Thanks for the inputs...
if(numChecked !=0 && (totalCheckboxes!=numChecked))
    {
           $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"opacity":"0.5"});             
    }
    else
    {
           $("#"+ form +" :checkbox[name='chk"+ current.name.match(/(\d+)/)[1] +"']").css({"opacity":"100"});           
    }

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 26076708
noticed that I used:
.parent().css({"background-color":"red"});

you need to apply the color to the TD, not to the INPUT, since the TD contains the INPUT.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question