There are multiple checkboxes with same id, in asp.net repeater control. User can select either email or phone against each record in repeater rows.
In following example; there are two rows, if you select the email icon in first row then it ticks relavent checkbox which is fine but if you tick the email icon on the next row then it will untick the first row checkbox instead of ticking the one next to it.
$(function() {
$("[id*=divchkemail]").click(function() {
$(this).toggleClass("image-email");
if ($('#chkemail').prop('checked')) {
$("#chkemail").prop('checked', false);
} else {
if ($('#chkphone').prop('checked')) {
$("#chkphone").prop('checked', false);
$("#divchkphone").toggleClass("image-phone");
}
$("#chkemail").prop('checked', true);
}
});
$("[id*=divchkphone]").click(function() {
$(this).toggleClass("image-phone");
if ($('#chkphone').prop('checked')) {
$("#chkphone").prop('checked', false);
} else {
if ($('#chkemail').prop('checked')) {
$("#chkemail").prop('checked', false);
$("#divchkemail").toggleClass("image-email");
}
$("#chkphone").prop('checked', true);
}
});
});
.image-phone-disabled {
background-image: url('http://i.imgur.com/74FcgdS.png');
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-phone {
background-image: url(http://i.imgur.com/LwsHkOt.png);
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-email-disabled {
background-image: url('http://i.imgur.com/khd2NG8.png');
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-email {
background-image: url(http://i.imgur.com/y5KE9jx.png);
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" />
</td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<span>
</span>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" />
</td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
</td>
</tr>
</table>
<span>
</span>
JSFiddle
http://jsfiddle.net/g8Xuz/48/
although you must use unique id's for elements, given your scenario I've written down this fiddle.
i've used this $(this).parent().next('td').find('input:checkbox'); to find the checkboxes
please try this http://jsfiddle.net/g8Xuz/50/
This works.
I gave the rows a class of contact. It can also work without the class on the rows by using $("table > tr") instead. No need to know the exact class names and can handle any number of sets allowing the correct unique IDs for the fields.
FIDDLE
$(function () {
$(".contact").on("click", function (e) {
var $div = $(this).find("div"); // the div on the clicked row
var divClass = $div.prop("class"); // its class
var $checkbox = $(this).find("input"); // the checkbox
var check = $checkbox.is(":checked"); // whether or not it is checked
if (e.target.type != "checkbox") { // we clicked somewhere else
check = !check; // toggle
$checkbox.prop("checked", check); // set the check
}
if (check) { // are we enabling?
if (divClass.indexOf("disabled") != -1) { // disabled?
$div.removeClass(divClass).addClass(divClass.replace("-disabled", ""));
}
}
else { // disable it
$div.removeClass(divClass).addClass(divClass + "-disabled");
}
var $otherContact=$(this).siblings("tr"); // the sibling row
if (check) {
$div = $otherContact.find("div");
divClass=$div.prop("class");
if (divClass.indexOf("disabled") == -1) {
$div.removeClass(divClass).addClass(divClass+"-disabled");
}
$checkbox=$otherContact.find("input"); // the checkbox
if ($checkbox.is(":checked")) $checkbox.prop("checked",false);
}
});
});
It's happening because you are selecting element by id and which is duplicate. You have to find your required element traversing up through its ancestors in the DOM tree so that selector only select elements within current row by setting a area of elements. Here is working code.
$(function () {
$("[id*=divchkemail]").click(function (e) {
var currentRow = $(e.target).parents().closest('table');
$(this).toggleClass("image-email");
if ($(currentRow).find('#chkemail').prop('checked')) {
$(currentRow).find('#chkemail').prop('checked', false);
}
else {
var chkPhoneInCurrentRow = $(currentRow).find('#chkphone')
var divchkInCurrentRow = $(currentRow).find('#divchkphone')
if ($(chkPhoneInCurrentRow).prop('checked')) {
$(chkPhoneInCurrentRow).prop('checked', false);
$(divchkInCurrentRow).toggleClass("image-phone");
}
$(currentRow).find('#chkemail').prop('checked', true);
}
});
$("[id*=divchkphone]").click(function (e) {
var currentRow = $(e.target).parents().closest('table');
$(this).toggleClass("image-phone");
if ($(currentRow).find('#chkphone').prop('checked')) {
$(currentRow).find('#chkphone').prop('checked', false);
}
else {
var chkEmailInCurrentRow = $(currentRow).find('#chkemail')
var divchkInCurrentRow = $(currentRow).find('#divchkemail')
if ($(chkEmailInCurrentRow).prop('checked')) {
$(chkEmailInCurrentRow).prop('checked', false);
$(divchkInCurrentRow).toggleClass("image-email");
}
$(currentRow).find('#chkphone').prop('checked', true);
}
});
});
.image-phone-disabled {
background-image:url('http://i.imgur.com/74FcgdS.png');
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-phone {
background-image:url(http://i.imgur.com/LwsHkOt.png);
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-email-disabled {
background-image:url('http://i.imgur.com/khd2NG8.png');
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-email {
background-image:url(http://i.imgur.com/y5KE9jx.png);
background-repeat:no-repeat ;
width:34px;
height:34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" /> </td>
<td> <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<span>
</span>
<table border=0>
<tr>
<td><div id="divchkemail" class="image-email-disabled" /></td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
</td>
</tr>
<tr>
<td><div id="divchkphone" class="image-phone-disabled" /></td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
</td>
</tr>
</table>
<span>
</span>
Here is working fiddle.
http://jsfiddle.net/hannnan/noukkjsq/
This is happening because you are using the same IDs for everything - the JS cannot differentiate between the two rows. So you click the second row's icon, the first element it finds with your ID (#divchkemail) it performs the action on, which is in the first row.
Related
When I click it for the first time, it click, but doesn't turn off...
I've tried this one, it checked and uncheck but only once.
This one doesn't work for me either.
$(document).ready(function() {
$("tr").click(function() {
var checkbox = $(this).find("input[type=checkbox]");
if (!checkbox.prop("checked", "")) {
checkbox.prop("checked", "false");
} else {
checkbox.prop("checked", "true");
}
});
});
td{
background:red;
padding:10px 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>test</td>
</tr>
</table>
Here is a toggle
$(document).ready(function() {
$("tr").on("click", function(e) {
const $target = $(e.target)
const $checkbox = $(this).find("input[type=checkbox]");
// only run code when NOT clicking checkbox
if (!$checkbox.is($target)) {
let checked = $checkbox.is(":checked")
$checkbox.prop("checked", !checked)
}
});
});
td {
background: red;
padding: 10px 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>test</td>
</tr>
</table>
I have an input and table like this :
<td valign="top" style = "padding: 12px 0px 0px 30px;" >
<div class="form-group">
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table style="display: none;">
<tr>
<td> apple </td>
</tr>
<tr>
<td> mango </td>
</tr>
<tr>
<td> carrot </td>
</tr>
</table>
</div>
</td>
I want to unhide "apple" link when the user types "app" on input and unhide "mango" link when user types "man" and so on.. I have googled this problem but I couldn't find anything satisfying. What kind of JavaScript code do I need to achieve this? Thanks.
You could do something like this:
Start by mapping each row of the table in an object (where the key is the text content of the row and the value is the row itself) so that you can quickly access it later. Then add an event listener to the input and when the user types something in go through the object seeing if any of its properties match the value, using the object to show/hide the elements.
let element, elements, i, input, n, tableBody;
elements = {};
tableBody = document.getElementById(`table-body`);
for (i = tableBody.children.length - 1; i > -1; i--) {
element = tableBody.children[i];
elements[element.textContent.trim()] = element;
}
input = document.getElementById(`inputlg`);
input.addEventListener(`input`, filterElements);
function filterElements() {
let key, value;
value = input.value;
for (key in elements) {
if (key.match(value)) {
elements[key].classList.add(`show`);
} else {
elements[key].classList.remove(`show`);
}
}
}
#table-body >* {
display: none;
}
.show {
display: block !important;
}
<td valign="top" style = "padding: 12px 0px 0px 30px;" >
<div class="form-group">
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table>
<tbody id="table-body">
<tr>
<td>
apple
</td>
</tr>
<tr>
<td>
mango
</td>
</tr>
<tr>
<td>
carrot
</td>
</tr>
</tbody>
</table>
</div>
</td>
You can achieve this by writing little more code as below.
$("#inputlg").keyup(function() {
var value = $(this).val();
console.log(value);
if (value == 'app') {
$('.app').attr('style', 'display:block');
} else {
$('.app').attr('style', 'display:none');
}
if (value == 'mon') {
$('.mon').attr('style', 'display:block');
} else {
$('.mon').attr('style', 'display:none');
}
if (value == 'car') {
$('.car').attr('style', 'display:block');
} else {
$('.car').attr('style', 'display:none');
}
})
Note:- I have just added class in particular anchor tag for your help.
Adding code snippet for same.
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table >
<tr>
<td>
apple
</td>
</tr>
<tr >
<td>
mango
</td>
</tr>
<tr class="car" style="display:none">
<td>
carrot
</td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#inputlg").keyup(function() {
var value = $(this).val();
console.log(value);
if (value == 'app') {
$('.app').attr('style', 'display:block');
} else {
$('.app').attr('style', 'display:none');
}
if (value == 'mon') {
$('.mon').attr('style', 'display:block');
} else {
$('.mon').attr('style', 'display:none');
}
if (value == 'car') {
$('.car').attr('style', 'display:block');
} else {
$('.car').attr('style', 'display:none');
}
})
})
</script>
</body>
</html>
I'm designing a page which needs to post a set of IDs to a php script.
There is a table with a number of Items (with associated images) to select. Old school would be to put a check box next to each Item and post the form, then loop through the form post with php.
But the design is requesting that "no checkboxes be used". The idea being that when a user clicks one of the Items, that item gets highlighted in CSS then a button will post all the highlighted items.
The html looks like this:
<td>
<table id="cell-5" class="change_back" onclick="checkItem('cell-5',5);">
<tr>
<td>
<img src="img/5.png" />
</td>
</tr>
</table>
</td>
<td>
<table id="cell-6" class="change_back" onclick="checkItem('cell-6',6);">
<tr>
<td>
<img src="img/6.png" />
</td>
</tr>
</table>
</td>
<td>
<table id="cell-7" class="change_back" onclick="checkItem('cell-7',7);">
<tr>
<td>
<img src="img/7.png" />
</td>
</tr>
</table>
</td>
Javascript:
function checkItem(clicked, prdId){
alert(prdId + ' was selected');
var cur = document.getElementById(clicked).className;
//if not highlighted
if (cur == 'change_back'){
//add item
document.getElementById(clicked).className = 'change_back_clicked';
}
else{
//remove item
document.getElementById(clicked).className = 'change_back';
}
}
the css:
.change_back {
background-color: #FFFFFF;
}
.change_back:hover {
cursor: pointer;
}
.change_back_clicked {
background-color: #C0C0C0;
}
Thoughts on how to do this without jquery and with?
var group = document.getElementById("group"),
elements = group.getElementsByTagName("div");
group.addEventListener("click", function(e) {
e.preventDefault();
if ("DIV" === e.target.tagName) {
if ("selected" === e.target.className) {
e.target.classList.remove("selected");
} else {
e.target.classList.add("selected");
}
}
});
#group div {
cursor: pointer;
}
.selected {
background-color: #C0C0C0;
}
<div id="group">
<div>first div</div>
<div>second div</div>
<div>third div</div>
</div>
Well I probably didn't explain what I wanted very clearly, so going with my own solution:
The javascript:
function checkItem(clicked, Id){
//clicked is the table element that was clicked
//Id is the id of the hidden var
//get the current css class of the table element
var cur = document.getElementById(clicked).className;
//flip the css class and update form
if (cur == 'primaryCl')
{
document.getElementById(clicked).className = 'secondaryCl';
//set form var to 'true' for form post
document.getElementById(Id).value = 'true';
}
else
{
//reverse of the above
document.getElementById(clicked).className = 'primaryCl';
document.getElementById(Id).value = 'false';
}
}
The CSS:
.primaryCl {
background-color: #E6E6E6;
border-collapse: separate;
border-spacing: 5px;
border:solid #6A6964 1px;
padding: 0px;
}
.primaryCl:hover {
background-color: #3cb0fd;
cursor: pointer;
}
.secondaryCl {
background-color: #3cb0fd;
border-collapse: separate;
border-spacing: 5px;
border:solid #6A6964 1px;
padding: 0px;
}
The php:
/* css class set dynamically (code removed for brevity) */
$ibClass = "primaryCl";
/* hidden set dynamically (code removed for brevity) */
$hiddenTag = "<input type=\"hidden\" name=\"tp_$Id\" id=\"tp_$Id\" value=\"$hiUpd\">";
/* inside while loop, looping through query results */
$out .= "
<td>
$hiddenTag
<table id=\"cp_$Id\" class=\"$ibClass\" onclick=\"checkItem('cp_$Id', 'tp_$Id');\">
<tr>
<td>
<img alt=\"pic\" height=\"70\" width=\"60\" src=\"$thumbnailDir/$imageMini\" />
</td>
<td>
<span class=\"b12\">$prodName</span>
</td>
</tr>
</table>
</td>";
I have the below code in my ASP (CLassic) page (part of a page with dozens of checkboxes set from the db):
<tr height="30px">
<td class="summarytext">Show Gender Pay Gap Options</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkDisplayGPGOptions" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
<td colspan="7"> </td>
<td>
<input type="button" class="help" align="left" id="Button3" onmousemove="javascript:DisplayHelp(150,-160, 10, 'HELP', 'Select if you want to exclude this pay type in netpay for attachment calculations.', this)" onmouseout="javascript:HideHelp()" WIDTH="16px" HEIGHT="16px">
</td>
<DIV id="divGPGOptiona" style="display:none">
<table>
<tr height="30px">
<td class="summarytext">Include Bonus in calculation for GPG reporting</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkIncludeBonusInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
</tr>
<tr height="30px">
<td class="summarytext">Include Gross Pay in calculation for GPG reporting</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkIncludeGrossPayInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
</tr>
</table>
</DIV>
</tr>
what I'd like to do is show and hide the DIV divGPGOptiona when the checkbox chkDisplayGPGOptions is checked...
Is there was some way of using just CSS for this, or will I need to do this with JavaScript and the DOM?
Create a class that represents "hide" state and toggle it when checkbox changes.
See how:
var checkbox = document.querySelector('input[name="check"]');
var div = document.querySelector('#container');
checkbox.addEventListener('change', function (e) {
if (div.classList.contains('is-hide')) {
div.classList.remove('is-hide');
} else {
div.classList.add('is-hide');
}
});
.is-hide {
display: none;
}
<input type="checkbox" name="check" />
<div id="container">Here goes the content.</div>
One possible solution is to toggle the display with JavaScript. You don't need jQuery for this. It can be done in native JavaScript.
var checkBox = document.getElementById("check-box");
var myDiv = document.getElementById("my-div");
myDiv.style.display = "none";
checkBox.addEventListener("click", function() {
if (myDiv.style.display == "none") {
myDiv.style.display = "block";
}
else {
myDiv.style.display = "none";
}
});
<div id="my-div">This is a div</div>
<p>The div above is hidden by default. Click the checkbox to toggle on and off</p>
<input id="check-box" type="checkbox" />
CSS Code:
.hidden{
display: none;
}
html Code:
<DIV id="divGPGOptiona" class="hidden" >
Jquery Code:
$(".checkbox").on('click',function(){
if($(".checkbox").prop("checked")){
$("#divGPGOptiona").removeClass("hidden");
}
else{
$("#divGPGOptiona").addClass("hidden");
}
});
Pure CSS using the siblings + selector.
So this can be done if you have the div as a sibling of the checkbox. In order for you to replicate, you would need to change your HTML structure. Which is advised, because you are placing a div inside a table row <tr>, without a table cell. Why?
.checkboxSibling {
display: none;
}
/*.checkbox:checked + .checkboxSibling {
display: block;
}*/
input[name="chkDisplayGPGOptions"]:checked + .checkboxSibling {
display: block;
}
<div>
Input 1 -
<input class="checkbox" name="chkDisplayGPGOptions" type="checkbox"/>
<div class="checkboxSibling">Checkbox Checked</div>
</div>
<div>
Input 2 -
<input class="checkbox" name="someOtherName" type="checkbox"/>
<div class="checkboxSibling">Checkbox Checked</div>
</div>
I want to implement gmail like checkbox functionality:
In which If CheckAll checkbox is clicked, all listed checkbox will be selected/unselected, if all listed checkbox are selected, CheckAll checkbox will be checked. and if only some checkbox are checked, - sign checkbox will be appear.
I have implement logic using div.
Here is the logic:
HTML:
<table id="ViewTable" class="tableEffectfull">
<thead>
<tr>
<th class="selectCol"><div class="unCheckedCheckBoxAll"></div></th>
<th class="nosCol">Products</th>
</tr>
</thead>
<tr>
<td><div class="unCheckedCheckBox"></div></td>
<td>ABCD</td>
</tr>
<tr>
<td><div class="unCheckedCheckBox"></div></td>
<td>PQRS</td>
</tr>
</table>
CSS:
.unCheckedCheckBox{
width: 25px;
height: 25px;
margin-top: -4px;
background: transparent url(images/prettyCheckable-green.png) top left no-repeat;
}
.CheckedCheckBox{
background: transparent url(images/prettyCheckable-green.png) 0 -60px;
}
.unCheckedCheckBoxAll{
width: 25px;
height: 25px;
margin-top: -4px;
background: transparent url(images/Checkable-green.png) top left no-repeat;
}
.CheckedCheckBoxAll{
background: transparent url(images/Checkable-green.png) 0 -60px;
}
Script:
//updated scripts:
$(".unCheckedCheckBox").click(function () {
$(this).toggleClass('CheckedCheckBox');
$('.unCheckedCheckBoxAll').toggleClass('CheckedCheckBoxAll', $('.CheckedCheckBox').length == $(".unCheckedCheckBox").length)
});
$(".unCheckedCheckBoxAll").click(function () {
$(this).toggleClass('CheckedCheckBoxAll');
$('.unCheckedCheckBox').toggleClass('CheckedCheckBox')
});
Now the problem is I am not getting what to do if all listed checkbox are selected, make checkedAll checkbox to be checked and if some are checked only highlighted checkbox will be display in checkedAll.
Below is the Image I am using:
$(".unCheckedCheckBox").click(function () {
$(this).toggleClass('CheckedCheckBox');
$('.unCheckedCheckBoxAll').toggleClass('CheckedCheckBoxAll', $('.CheckedCheckBox').length == $(".unCheckedCheckBox").length)
});
$(".unCheckedCheckBoxAll").click(function () {
$(this).toggleClass('CheckedCheckBoxAll');
$('.unCheckedCheckBox').toggleClass('CheckedCheckBox', $(this).is('.CheckedCheckBoxAll'))
});
demo
Try this and get an idea about how to do it.
http://jsfiddle.net/FdEhf/
<input type="checkbox" class="all" value="all">Check all
<br/>
<input type="checkbox" value="1">
<br/>
<input type="checkbox" value="2">
<br/>
<input type="checkbox" value="3">
<br/>
<input type="checkbox" value="4">
<br/>
<input type="checkbox" value="5">
<br/>
<input type="checkbox" value="6">
<br/>
<input type="checkbox" value="7">
<br/>
<input type="checkbox" value="8">
Script,
$("input.all").on("change", function (e) {
$(':checkbox').prop("checked",$(this).is(":checked"))
});
Update
http://jsfiddle.net/FdEhf/2/
$(document).on("change", ".all:not('.minus')", function (e) {
$(':checkbox').prop("checked", $(this).is(":checked"));
});
$(document).on("change", ".all.minus", function (e) {
$(':checkbox').prop("checked", false);
$(".all").removeClass("minus");
});
$(document).on("change", ":checkbox:not('.all')", function (e) {
if ($(':checkbox').not(".all").length == $(':checkbox:checked').not(".all").length) {
$(".all").prop("checked", true).removeClass("minus");
} else {
$(".all").prop("checked", false).addClass("minus");
if ($(':checkbox:checked').not(".all").length == 0) {
$(".all").removeClass("minus");
}
}
});
UPDATE2
Updated to your approch based on your request.http://jsfiddle.net/FdEhf/4/
<table id="ViewTable" class="tableEffectfull">
<thead>
<tr>
<th class="selectCol">
<div class="unCheckedCheckBoxAll"></div>
</th>
<th class="nosCol">Products</th>
</tr>
</thead>
<tr>
<td>
<div class="unCheckedCheckBox"></div>
</td>
<td>ABCD</td>
</tr>
<tr>
<td>
<div class="unCheckedCheckBox"></div>
</td>
<td>PQRS</td>
</tr>
</table>
Script,
$(document).on("click", ".unCheckedCheckBoxAll:not('.minus')", function (e) {
$(this).toggleClass('CheckedCheckBoxAll');
$('.unCheckedCheckBox').toggleClass('CheckedCheckBox');
});
$(document).on("click", ".unCheckedCheckBoxAll.minus", function (e) {
$('.unCheckedCheckBox').removeClass('CheckedCheckBox');
$(this).removeClass("minus");
});
$(document).on("click", ".unCheckedCheckBox", function (e) {
$(this).toggleClass("CheckedCheckBox");
if ($('.unCheckedCheckBox').length == $('.CheckedCheckBox').length) {
$(".unCheckedCheckBoxAll").removeClass("minus");
} else {
$(".unCheckedCheckBoxAll").removeClass("CheckedCheckBoxAll").addClass("minus");
if ($('.CheckedCheckBox').length == 0) {
$(".unCheckedCheckBoxAll").removeClass("minus");
}
}
});
Try this
http://jsfiddle.net/VrkA3/1/
I have changed the script :
$(".unCheckedCheckBox").click(function () {
$(this).toggleClass('CheckedCheckBox');
if ($('.CheckedCheckBox').length == 2) {
$('.CheckBoxAll').addClass('CheckedCheckBoxAll').removeClass('minusCheckBoxAll')
} else {
$('.CheckBoxAll').removeClass('CheckedCheckBoxAll')
if ($('.CheckedCheckBox').length == 0)
$('.CheckBoxAll').removeClass('minusCheckBoxAll')
else $('.CheckBoxAll').addClass('minusCheckBoxAll')
}
});
$(".CheckBoxAll").click(function () {
$(this).removeClass('minusCheckBoxAll')
$(this).toggleClass('CheckedCheckBoxAll');
$('.unCheckedCheckBox').toggleClass('CheckedCheckBox', $(this).is('.CheckedCheckBoxAll'))
});
added a two new css classes too...
.unCheckedCheckBox {
width: 25px;
height: 25px;
margin-top: -4px;
background: red top left no-repeat;
}
.CheckedCheckBox {
background: pink 0 -60px;
}
.CheckBoxAll {
background: white;
}
.unCheckedCheckBoxAll {
width: 25px;
height: 25px;
margin-top: -4px;
background: blue top left no-repeat;
}
.CheckedCheckBoxAll {
background: black 0 -60px;
}
.minusCheckBoxAll {
background: green 0 -60px;
}