We Keep Coding

click event on td not working

I have an HTML table. In the td tag there is a checkbox. If I click on that checkbox then it gets checked or unchecked as usual. But what I want is that If I click anywhere on that specific td then the checkbox will also get checked or unchecked. Its because if there are a lot of rows and checkboxes there then you might find it hard to exactly put your mouse pointer over the checkbox and press a click (checkboxes are small so finding it difficult is normal). So I want it to be easy for my client, if he press a click outside the checkbox but inside the parent td tag then it will also work.
My JQuery code is working very good. Now if I click outside the checkbox then its click event is triggered. But the problem is now If I click exactly on the checkbox then it is not working. I am giving my code below. Here is also a jsfiddle link of my code.
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'><input type='checkbox'/></td>
</tr>
</table>
</div>
My JQuery code:
$('.modal-inner-content').on('click', 'td', function(){
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});
UPDATE
Now the jsfiddle code will work, i forgot to include the library. Now see there, if you click outside the checkbox then its working but if you click exactly on the checkbox then its not working. any help?

Try this:
$('.modal-inner-content td').click(function (event) {
if (!$(event.target).is('input')) {
$('input:checkbox', this).prop('checked', function (i, value) {
return !value;
});
}
});

You can do it by checking the clicked element is checkbox or not like following.
$('.modal-inner-content').on('click', 'td', function (e) {
if (!$(e.target).is(':checkbox')) {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'>
<input type='checkbox' />
</td>
</tr>
</table>
</div>

in your jsfiddle just add Jquery resource
https://code.jquery.com/jquery-2.2.4.js

$('.modal-inner-content').on('click', 'check', function() {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});

iframe doesn't getting hidden using JQuery

In my page I have a div with another div and an iframe as shown below.
<div class="v_dissc_tab" id="tabs-1">
<div id="publicevent">
<div class="crtraone" style="margin-left:800px;">
<button onclick="addpublic()">Add New</button>
</div>
<div>
<table width="100%">
<tr>
<td><b>Programme</b></td>
<td><b>Scheduled Start Time</b></td>
<td><b>Scheduled End Time</b></td>
<td><b>Amount</b></td>
<td><b>Status</b></td>
<td></td>
</tr>
<tr>
<?php if($publicnum>0)
{
}
else
{ ?>
<td colspan=6>
<?php echo "No any public channel programmes";?>
</td>
<?php }?>
</tr>
</table>
</div>
</div>
<iframe id="calendarframe" style="width: 100%;height:600px;display:none;" src="<?php echo base_url()?>index.php/channel/viewbookings">
</iframe>
</div>
On page loading, the div with id publicevent will be shown and the iframe is hidden. When I click on Add New button, the iframe will be loaded. Inside iframe I am loading another page which contains a button
<button onclick="managepublic()">Manage Public Events</button>
On clicking this button, I want to show the div with id publicevent and want to hide the iframe (as when the page is firstly loaded). Shown below is managepublic().
function managepublic()
{
location.reload(); // not making any changes
//$('#publicevent').show(); Tried with this also
//$('#calendarframe').hide();
}
Can anyone help me to solve this. Thanks in advance.

dont' use location.reload ,use only following code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
function managepublic()
{
$('#publicevent').show();
$('#calendarframe').hide();
}

On clicking this button, I want to show the div with id publicevent
and want to hide the iframe (as when the page is firstly loaded).
Check if this helps.
$('iframe').attr( "src", "http://www.apple.com/");
$('iframe').load(function() {
$('iframe').show()
$('#loaded').hide();
});
$('#button').click(function() {
$('#loaded').show();
$('iframe').hide();
});
JSFiddle

Try the following code snippet.
You are referring elements of <iframe>'s parent.
function managepublic(){
$('#calendarframe', window.parent.document).hide(250, function() {
$('#publicevent', window.parent.document).show();
});
}
Or
function managepublic(){
window.parent.$('#calendarframe').hide(250, function() {
window.parent.$('#publicevent').show();
});
}
Or Change the order of the hide events.
function managepublic(){
window.parent.$('#publicevent').show();
window.parent.$('#calendarframe').hide();
}
Note :
For this to work, parent must have jQuery included.
It won't work if parent is in different domain.

Remove an image brought up by on mouseover

The following script opens an image onmouseover, however I can't come up with a way to remove the image onmouseout. I know I am missing something extremely simple but can't seem to find something that works.
<script type="text/javascript">
function show(Id) {
document.getElementById(Id).style.display="inline";
}
</script>
<span onmouseover="show ('myImage')">- <u>LAZARETTE</u></span></b>
<img src="../images/MarkILineDrawingLazarette.jpg" id="myImage" border="0" style="display:none;"

You are very close! Just add the onmouseout event!
HTML
<b>
<span onmouseover="show('myImage',true)" onmouseout="show('myImage',false)">- <u>LAZARETTE</u></span></b>
JAVASCRIPT
function show(Id, show) {
document.getElementById(Id).style.display = show ? "inline" : "None";
}

function hide(Id) {
document.getElementById(Id).style.display="none";
}
then change the opening span tag to:
<span onmouseover="show('myImage')" onmouseout="hide('myImage')" >
Edit:
JSFiddle!

How to stop link button refreshing the page

In my code I'm using a link button called updateLogButton which shows/hides a div. Because I use a link button everytime its clicked focus is moved to the beginning of the page. How can I stop this default behaviour?
Jquery snippet:
$('#updateLogText').hide();
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
});
HTML code:
<tr>
<td>Update Log</td>
</tr>
<tr>
<td colspan="3" >
<div id="updateLogText" style="width:100%;">
<?php echo $data['updates']; ?>
</div>
</td>
</tr>
EDIT:
example of what i mean: http://jsfiddle.net/cF4Bb/7/

To prevent the default action when the link is clicked you can return false from the click handler or call event.preventDefault where event is the event object passed to the click handler.
$('#updateLogText').hide();
$('#updateLogButton').click(function(event) {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
event.preventDefault();
//or return false;
});

Add return false
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
return false;
});

You can also try changing your href to:
Update Log

Return false from the one click event
$('#updateLogText').hide();
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
return false;
});

Remove the href="#" from
<td><a **href="#"** id="updateLogButton">Update Log</a></td>
to
<td><a id="updateLogButton">Update Log</a></td>
note that this may remove the 'hyperlink' like text; which you can re-apply using css.
[EDIT: ADDED]
Alternatively you can use LinkButton instead as follows:
<asp:LinkButton id="btnLink" Text="Update Log" **onclick**="javascript:ShowHide(); return false;"/>
You will have to write your own javascript function. **Note: can't remember on top of my head whether it onclick or onclientclick but you get the idea.

jquery .attr("alt")=='name'

Can anybody help me letting me know what is wrong with the following code?
$(document).ready(function(){
$("img").attr("alt")=='minimize'.click(function(){
alert("he");
});
});
thanks.
Addition:
Sorry guys, I am trying to add an event to a image inside of a table, so when its clicked it collapse the div under need.
I am facing several problems here.
1.- all tables and div use the same class.
2.- it may be a minimum of two tables and divs.
3.- first table should no be click able, only its images (for show and hide div under)
4.- rest of tables should be click able the whole table to show and hide div under with slidetoggle.
5.- rest of tables also have two images for show with slideDown and slideUp.
What I have it works but not fully.
Once again.
Thanks.
so far this is what I have.
<script type="text/javascript">
$(document).ready(function(){
$(".heading:not(#Container1)").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
$(document).ready(function(){
$("img[alt='min']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
$("img[alt='max']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
</script>
<html>
<head></head>
<body>
<table class="heading" id="container1">
<tr>
<td>heading1</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container1</div>
<table class="heading">
<tr>
<td>heading2</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container2</div>
<table class="heading">
<tr>
<td>heading3</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container3</div>
</body>
</html>

You need to use the attribute selector not get the attribute and compare it.
$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});

$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});
EDIT
$(function() {
$('img[alt='min'], img[alt='max']').click(function() {
var container = $(this).parent('table').next('div.container');
if ( $(this).attr('alt') == 'min' )
container.slideUp('slow');
if ( $(this).attr('alt') == 'max' )
container.slideDown('slow');
return false;
});
$('table.heading:not(:first)').click(function() {
$(this).next('div.container').slideToggle('slow');
return false;
});
});

The alt attribute is not a way to filter your images. It is designed to put alternative content for when the image cannot be displayed (not found, unwanted by user, no screen, etc.)
You should instead use the class attribute to discriminate your images the way you want.
Your code then becomes:
HTML
<img src="..." class="minimize" alt="A beautiful image">
Javascript
$(document).ready(function(){
$("img.minimize").click(function(){
alert("he");
});
});

It is not syntactically correct. What are you trying to do? Maybe this?
$(document).ready(function(){
$("img[alt=minimize]").click(function(){
alert("he");
});
});