When TR is clicked, then check the checkbox - javascript

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>

Related

Cannot read property 'childNodes' checkbox to get value from same row

Below code should get me the value of the column next to the checked box in the table, but, once the button is clicked, I am getting:
Cannot read property childNodes of null
Note: database from firebase which where the values from the table come from
Table image :
rootRefReAgents.on("child_added", snap => {
var AgentName = snap.child("Name").val();
$("#table_body_Test").append("<tr><td>" + AgentName + "</td><td><INPUT TYPE=\"Checkbox\"> </Input></td></tr>");
});
}
function ActionData(){
let agents = [];
let table = document.getElementById("table_body_Test");
let childNodes = Array.from(table.childNodes);
// let childNodes = table.childNodes;
for (let child of childNodes.values()) {
console.log(`child: ${child}`);
if (child.constructor.name !== "HTMLTableRowElement") {
continue;
}
let agent = child.childNodes.item(1).innerHTML;
console.log(`agent: ${agent}`);
let checkbox = child.childNodes.item(3).childNodes.item(1);
console.log(`checkbox: ${checkbox}`);
console.log(checkbox.checked);
if (checkbox.checked) {
agents.push(agent);
}
}
console.log(`agents: ${agents}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
<button id="submitBtn" onclick="ActionData()">Next</button>
ES6 brought new methods that simplify the code and its reading
const tableBody = document.querySelector('#testTable tbody' );
document.querySelector('#submitBtn').onclick=()=>
{
let agents = [];
console.clear();
for (let rowX of tableBody.rows )
{
let
agent = rowX.cells[0].textContent,
checkbox = rowX.cells[1].querySelector('input[type=checkbox]')
;
console.log( 'agent:', agent, 'checked:', checkbox.checked);
if (checkbox.checked) { agents.push(agent); }
}
console.log( 'agents (array):', agents.join(' / '));
}
/// bonus info :
/*
rootRefReAgents.on("child_added", snap=>{
let
newRow = tableBody.insertRow(-1);
newRow.insertCell(0).textContent = snap.child("Name").val();
newRow.insertCell(1).innerHTML = '<input type="Checkbox">';
});
*/
#testTable { margin: auto; border-collapse: collapse }
#testTable thead tr {
color: #D2002E;
background: #FFCC01;
height:32px;
font-weight: bold;
}
#testTable tr:nth-child(even) {background-color: lightgrey }
#testTable td { border:1px solid grey; padding: 0 20px; }
#testTable td:nth-child(2) { text-align: center }
<table id="testTable">
<thead>
<tr> <td>Agents</td> <td>Select</td> </tr>
</thead>
<tbody>
<tr> <td>AMC</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>Mygulfex</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>topStar</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>WMC</td> <td> <input type="checkbox" > </td> </tr>
</tbody>
</table>
<button id="submitBtn" >see Selects in console</button>

How to use a cookie to save the clicked value grab the cookie every time the user opens the page

I have following code to highlight table record with three different colors when user click a checkbox. How can I use a cookie to save the clicked value with grab the cookie every time the user opens the page everytime? I haven't no idea how cookies are used. Answer would be really appreciate
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style>
.highlight-red {
background-color: red;
}
.highlight-green {
background-color: green;
}
.highlight-yellow {
background-color: yellow;
}
</style>
<div class="col-lg-10">
<table id="Table" border="1">
<tr class="highlight">
<td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
<td>Click me</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function changeSoma(data, color){
if(data.checked && color == 'red'){
$(data).parent().parent().addClass("highlight-red");
}
else{
$(data).parent().parent().removeClass("highlight-red");
}
if(data.checked && color == 'green'){
$(data).parent().parent().addClass("highlight-green");
}
else{
$(data).parent().parent().removeClass("highlight-green");
}
if(data.checked && color == 'yellow'){
$(data).parent().parent().addClass("highlight-yellow");
}
else{
$(data).parent().parent().removeClass("highlight-yellow");
}
}
</script>
</body>
</html>
localStorage is easier than cookie I thought . You can set and get by localStorage.setItem or localStorage.getItem and it will remain until you remove them !!!
<script>
var cond = JSON.parse(localStorage.getItem("check"));
for(var i in cond) {
if(cond[i]) {
$("#"+i).attr("checked",true);
$("#"+i).parent().parent().addClass("highlight-"+cond[i]);
}
}
function changeSoma(data, color){
var state;
if(localStorage.getItem("check") == null) {
state = {cb1:0,cb2:0,cb3:0};
} else{
state = JSON.parse(localStorage.getItem("check"));
}
if(data.checked) {
$(data).parent().parent().addClass("highlight-"+color);
state[data.id]= color;
} else {
$(data).parent().parent().removeClass("highlight-"+color);
state[data.id]= 0;
}
localStorage.setItem("check",JSON.stringify(state));
}
</script>
it easier using localStorage but since you're using jQuery then use jQuery cookie plugin
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style>
.highlight-red {
background-color: red;
}
.highlight-green {
background-color: green;
}
.highlight-yellow {
background-color: yellow;
}
</style>
<div class="col-lg-10">
<table id="Table" border="1">
<tr class="highlight">
<td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
<td>Click me</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function() {
var checkedBox = $.cookie('checkedBox');
console.log(checkedBox);
if(checkedBox !== undefined) {
// to check only
//$(checkedBox).attr('checked', true);
// emulate click to check and change the class
$(checkedBox).each(function() {
this.click();
})
}
})
function changeSoma(data, color) {
if(data.checked && color == 'red') {
$(data).parent().parent().addClass("highlight-red");
}
else {
$(data).parent().parent().removeClass("highlight-red");
}
if(data.checked && color == 'green') {
$(data).parent().parent().addClass("highlight-green");
}
else {
$(data).parent().parent().removeClass("highlight-green");
}
if(data.checked && color == 'yellow') {
$(data).parent().parent().addClass("highlight-yellow");
}
else {
$(data).parent().parent().removeClass("highlight-yellow");
}
// set cookie
var checked = "";
$('input[type="checkbox"]').each(function() {
if($(this).prop('checked')) {
checked += "#" + this.id + ","; // #cb, jQuery id selector
}
})
checked = checked.replace(/,$/, '')
console.log(checked);
$.cookie('checkedBox', checked);
}
</script>
</body>
</html>
I'm assuming you want the values to be selected still even when the user goes to a different page on your site and then select them again once back in that page.
As stated here, you set the cookies using the document.cookie javascript property.
The property mentioned above, however, is a semicolon separated key-value pair. you'll have to manipulate the string in order to add/edit a value.
Once you've added the value that you want, you can once again read it and then set the rows you want to be selected.
To get the selected value, you could use $(data).val() and put it inside changeSoma(). From there, you could check if it's checked $(data).is(':checked'). If it's checked, add it to document.cookie like document.cookie = "key=value; key2=value2;"

change Id/class or input name on adding rows in dynamic table

Currently I'm working on a dynamic table where user can add and remove rows form the table to input data...how do I change my user's input 'name/id/class' on adding rows. Any help will be appreciated. Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic table</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js" integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
crossorigin="anonymous"></script>
<script>
$(document).ready( function() {
$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});
}
});
$(document).on("click", "button.remove", function(){
if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});
$(document).on("click", ".add, .remove", function(){
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});
</script>
</head>
<body>
<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr>
<th class="small">S.No</th>
<th class="sizing"> Description</th><th>Quantity</th>
<th> Price </th>
<th><button id="butVal"> + </button></th>
</tr>
</thead>
<tbody>
<tr class="tabRow" id="1item">
<td class="sno">1</td>
<td> <input class="desc" type="text" name="desc"/> </td>
<td> <input class="qty" type="text" name="qty"/> </td>
<td> <input class="price" type="text" name="price"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So you have tried using ".addClass() Jquery function" or removeclass() function??
Heres an example of .addClass():
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
So, whenever a new entry is created, you need to change the class attribute of the input elements:
$('#butVal').click(function () {
var rowLen = $('tr.tabRow').length;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function (index, element) {
var className = $(element).attr("class"); // get the current class attribute of the element
$(element).attr("class", className + rowLen); // append the current row number to the class
$(element).val("");
});
}
});
Note: when you remove rows, the classes will not change. It could happen that you have the classes desc, then desc1, but then desc3.

Selected table cell text show in input field

For a project I'm trying to develop a online ticketing system where I want to read the the Data from selected cell on a table Example .
FE: If someone select A1 seat Number the Ticket span should show the Number If selected multiple value the span show the selected multiple ticket number. Please visit my jsfiddle to see what I'm trying to achieve
$(function () {
var isMouseDown = false,
isHighlighted,
tickets = [];
$("#ticket-board .select")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
selected();
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
selected();
}
});
$(document)
.mouseup(function () {
isMouseDown = false;
//alert('Deselected');
});
});
function selected() {
tickets = $("#ticket-board .select.highlighted").map(function(){
return $(this).text();
});
$('.selected-ticket').html(tickets.get().join());
}
table .select {
width:35px;
height:35px;
text-align:center;
vertical-align:middle;
background-color:#fff;
border:1px solid #c0c0c0;
}
table .selected {
width:35px;
height:35px;
text-align:center;
vertical-align:middle;
background-color:red;
border:1px solid #c0c0c0;
}
table td.highlighted {
background-color:#60fc60;
}
.ticket-panel{
margin-top:30px;
margin-left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticket-panel">
<table cellpadding="0" cellspacing="0" id="ticket-board">
<tbody>
<tr><td class="select">A1</td><td class="select">A2</td><td></td><td class="select">A3</td><td class="select">A4</td></tr>
<tr> <td class="select">B1</td><td class="selected">B2</td><td></td><td class="select">B3</td><td class="select">B4</td></tr>
<tr> <td class="select">C1</td><td class="select">C2</td><td></td><td class="select">C3</td><td class="select">C4</td></tr>
<tr> <td class="select">D1</td><td class="select">D2</td><td></td><td class="select">D3</td><td class="select">D4</td></tr>
<tr> <td class="select">E1</td><td class="select">E2</td><td></td><td class="select">E3</td><td class="select">E4</td></tr>
<tr> <td class="select">F1</td><td class="select">F2</td><td></td><td class="select">F3</td><td class="select">F4</td></tr>
<tr> <td class="select">G1</td><td class="select">G2</td><td></td><td class="select">G3</td><td class="select">G4</td></tr>
<tr> <td class="select">H1</td><td class="select">H2</td><td></td><td class="select">H3</td><td class="select">H4</td></tr>
<tr> <td class="select">I1</td><td class="select">I2</td><td></td><td class="select">I3</td><td class="select">I4</td></tr>
<tr> <td class="select">J1</td><td class="select">J2</td><td class="select">J5</td><td class="select">J3</td><td class="select">J4</td></tr>
</tbody>
</table>
<div class="ticket-data">
<br>
<p>Ticket: <span class="selected-ticket"></span></p>
</div>
</div>
Select every highlighted class and add value of them to span. Like this code
var ticketValue = "";
$("#ticket-board td.highlighted").each(function(){
ticketValue += $(this).text() + ",";
});
$(".selected-ticket").text(ticketValue);
You can see demo in jsfiddle
You can get the texts of the selected cell using map()
$(function () {
var isMouseDown = false,
isHighlighted,
tickets = [];
$("#ticket-board .select")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
selected();
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
selected();
}
});
$(document)
.mouseup(function () {
isMouseDown = false;
//alert('Deselected');
});
});
function selected() {
tickets = $("#ticket-board .select.highlighted").map(function(){
return $(this).text();
});
$('.selected-ticket').html(tickets.get().join());
}
table .select {
width:35px;
height:35px;
text-align:center;
vertical-align:middle;
background-color:#fff;
border:1px solid #c0c0c0;
}
table .selected {
width:35px;
height:35px;
text-align:center;
vertical-align:middle;
background-color:red;
border:1px solid #c0c0c0;
}
table td.highlighted {
background-color:#60fc60;
}
.ticket-panel{
margin-top:30px;
margin-left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticket-panel">
<table cellpadding="0" cellspacing="0" id="ticket-board">
<tbody>
<tr><td class="select">A1</td><td class="select">A2</td><td></td><td class="select">A3</td><td class="select">A4</td></tr>
<tr> <td class="select">B1</td><td class="selected">B2</td><td></td><td class="select">B3</td><td class="select">B4</td></tr>
<tr> <td class="select">C1</td><td class="select">C2</td><td></td><td class="select">C3</td><td class="select">C4</td></tr>
<tr> <td class="select">D1</td><td class="select">D2</td><td></td><td class="select">D3</td><td class="select">D4</td></tr>
<tr> <td class="select">E1</td><td class="select">E2</td><td></td><td class="select">E3</td><td class="select">E4</td></tr>
<tr> <td class="select">F1</td><td class="select">F2</td><td></td><td class="select">F3</td><td class="select">F4</td></tr>
<tr> <td class="select">G1</td><td class="select">G2</td><td></td><td class="select">G3</td><td class="select">G4</td></tr>
<tr> <td class="select">H1</td><td class="select">H2</td><td></td><td class="select">H3</td><td class="select">H4</td></tr>
<tr> <td class="select">I1</td><td class="select">I2</td><td></td><td class="select">I3</td><td class="select">I4</td></tr>
<tr> <td class="select">J1</td><td class="select">J2</td><td class="select">J5</td><td class="select">J3</td><td class="select">J4</td></tr>
</tbody>
</table>
<div class="ticket-data">
<br>
<p>Ticket: <span class="selected-ticket"></span></p>
</div>
</div>
http://jsfiddle.net/34ueotjz/

Multiple checkboxes with same id and one needs to be selected - jquery

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.

Categories