To do this, I have a javascript file that count how many checkboxes in my form are checked, then:
if nothing is checked, these buttons: Change, delete, reset password will be disabled.
if one is checked, those will be all enabled.
if two or more is checked, Change will be disabled, the rest will still be enabled.
But in reality all of them stay disabled no matter what I do, so I wonder what I did wrong here.
Here is my code:
html:
<form action="" name="tform" method="POST">
<table>
<tr>
<td colspan="2">
</td>
<td colspan="3" align="right">
<input type="text" name="search_value" size="35"/><input type="submit" name="Search_clicked" value="Search"/>
</td>
</tr>
<tr>
<td colspan="5">
<table class="sortable" id="sortable_example" border="2">
<tr>
<th class="unsortable">Select</th>
<th>UserID</th>
<th>User name</th>
<th>Enable/Disable</th>
<th>Start date</th>
<th>End date</th>
</tr>
<tr>
<td><input type="checkbox" name="userid[]" value="1"/></td>
<td>00001</td>
<td>trang</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="11"/></td>
<td>00011</td>
<td>trangnt00914#fpt.edu.vn</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="12"/></td>
<td>00012</td>
<td>apgs1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="13"/></td>
<td>00013</td>
<td>congchua_cambuagietchim#yahoo.</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="14"/></td>
<td>00014</td>
<td>apgs1234#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="15"/></td>
<td>00015</td>
<td>apgs1104#yahoo.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="16"/></td>
<td>00016</td>
<td>trang1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td><input type="submit" name="Add_clicked" value="Add"/></td>
<td><input type="submit" name="Add_massively_clicked" value="Add massively"/></td>
<td><input type="submit" name="Change_clicked" disabled value="Change"/></td>
<td><input type="submit" name="Delete_clicked" disabled onclick="return confirm('Are you sure?');" value="Delete"/></td>
<td><input type="submit" name="Reset_password_clicked" disabled onclick="return confirm('Are you sure?');" value="Reset password"/></td>
</tr>
</table>
</form>
and javascript:
var obj;
var count=0;
var Change = document.getElementsByName('Change_clicked')[0];
var Delete = document.getElementsByName('Delete_clicked')[0];
var Reset_password = document.getElementsByName('Reset_password_clicked')[0];
for (var i=0; i<tform.elements.length; i++) {
obj = tform.elements[i];
if (obj.type == "checkbox" && obj.checked) {
count++;
}
}
if(count==0){
Change.disabled=true;
Delete.disabled=true;
Reset_password.disabled=true;
}
if(count==1){
Change.disabled=false;
Delete.disabled=false;
Reset_password.disabled=false;
}
if(count>1){
Change.disabled=true;
Delete.disabled=false;
Reset_password.disabled=false;
}
Thank you for any help!
Your code is fine, the only thing you missed to wrap it to a function and add an event handler.
1) Using onchange event handler, for your checkboxes
example:
<input type="checkbox" onchange="fun()" name="userid[]" value="1"/>
2) Wrap your code to a function like
function fun() {
//add your code
}
See it is working in this JSFiddle
Try instead of using:
<input type="submit" name="Change_clicked" disabled value="Change"/>
just:
<input type="submit" name="Change_clicked" value="Change"/>
for each button and then on document.ready and onclick() event within a checkbox check the amount of enabled check boxes. Then apply your settings from your function.
Also instead of using
var Change = document.getElementsByName('Change_clicked')[0];
just use ids with your elements because they are present only once:
var Change = document.getElementsById('Change_clicked');
Edit: instead of onclick() trigger the function by onChange(), kudos to #Praveen
Related
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">question</th>
<th scope="col">M</th>
<th scope="col">L</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td><input type="radio" id="1q1m" name="fav_language" value="M"></td>
<td><input type="radio" id="1q1l" name="fav_language" value="L"></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td><input type="radio" id="1q2m" name="fav_language2" value="M"></td>
<td><input type="radio" id="1q2l" name="fav_language2" value="L"></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mark</td>
<td><input type="radio" id="1q3m" name="fav_language3" value="M"></td>
<td><input type="radio" id="1q3l" name="fav_language3" value="L"></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Mark</td>
<td><input type="radio" id="1q4m" name="fav_language4" value="M"></td>
<td><input type="radio" id="1q4l" name="fav_language4" value="L"></td>
</tr>
</tbody>
</table>
in javascript how i can make sure the result only one choice of value M selected and one L selected if user to select more will be prevented.
enter image description here
so each column type on choice only selected.
You could add a change event handler on the radios, which checks for already :checked radios of the same value, and then unsets the excess checked radio:
const radios = document.querySelectorAll('input[type="radio"][value="L"],input[type="radio"][value="M"]');
for(let radio of radios)
radio.addEventListener('change',event=>{
if(document.querySelectorAll('input[type="radio"][value="'+event.target.value+'"]:checked').length > 1)
event.target.checked = false;
});
Could be written a bit nicer when you give all respective radios the same class and select them via that class.
If you have groups within whom you can only have one of two choices, consider giving those a data-* attribute and check for that too:
const radios = document.getElementsByClassName('choice');
for(let radio of radios)
radio.addEventListener('change',event=>{
let selectorQuery = ''.concat(
'.choice',
'[data-group="'+event.target.dataset.group+'"]',
'[value="'+event.target.value+'"]',
':checked'
);
if(document.querySelectorAll(selectorQuery).length > 1)
event.target.checked = false;
});
<table>
<thead><tr><th>Choice</th><th>M</th><th>L</th></tr></thead>
<tbody>
<tr>
<td>Lang 1</td>
<td><input type="radio" class="choice" data-group="lang" name="lang1" value="M"></td>
<td><input type="radio" class="choice" data-group="lang" name="lang1" value="L"></td>
</tr>
<tr>
<td>Lang 2</td>
<td><input type="radio" class="choice" data-group="lang" name="lang2" value="M"></td>
<td><input type="radio" class="choice" data-group="lang" name="lang2" value="L"></td>
</tr>
<tr>
<td>Alpha 2</td>
<td><input type="radio" class="choice" data-group="alpha" name="alpha1" value="M"></td>
<td><input type="radio" class="choice" data-group="alpha" name="alpha1" value="L"></td>
</tr>
<tr>
<td>Alpha 1</td>
<td><input type="radio" class="choice" data-group="alpha" name="alpha2" value="M"></td>
<td><input type="radio" class="choice" data-group="alpha" name="alpha2" value="L"></td>
</tr>
</tbody>
</table>
If you have a choice M and L, and try to change the M to L, it will uncheck, because the change event is too late. One could use a mousedown event to be a bit ealier.
The referenced survey uses another approach:
// in the change handler:
let oppositeRadioId = this.id.slice(0,3) +
(this.id.slice(-1)==='m'?'l':'m');
if(document.getElementById(oppositeRadioId).checked)
// notify that both can't be selected, and remove checked attribute of current target
They don’t group by name attribute, but by id, and lookup the corresponding counterpart, and if it’s checked, they uncheck the currently clicked radio. You could use that too with your id naming scheme.
I know a javascript code is asked but if for both column the radio button can be check then you can use radio group (no javascript required).
See https://www.w3schools.com/tags/att_input_type_radio.asp
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">question</th>
<th scope="col">M</th>
<th scope="col">L</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td><input type="radio" id="1q1m" name="fav_languageM" value="M"></td>
<td><input type="radio" id="1q1l" name="fav_language" value="L"></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td><input type="radio" id="1q2m" name="fav_languageM" value="M"></td>
<td><input type="radio" id="1q2l" name="fav_language" value="L"></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mark</td>
<td><input type="radio" id="1q3m" name="fav_languageM" value="M"></td>
<td><input type="radio" id="1q3l" name="fav_language" value="L"></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Mark</td>
<td><input type="radio" id="1q4m" name="fav_languageM" value="M"></td>
<td><input type="radio" id="1q4l" name="fav_language" value="L"></td>
</tr>
</tbody>
</table>
</div>
Just Use a function for isSelected like when you select a button make isSelected True.
exmaple:-
let isSelectedM = false; //declare as a global variable
let isSelectedL = false;
//function invoke when user select
function check(){
if(isSelectedM==false){
// make it possible
isSelectedM = true;
}else{
// already checked
}
// for L also
if(isSelectedL==false){
// make it possible
isSelectedL = true;
}else{
// already checked
}
}
I have a single column html table with 20 rows, containing strings (used as tags):
<table id="table_of_tags">
<tr>
<td id="c_01" onclick="Pass_Content_Of_Cell(_param)">Tree</td>
</tr>
<tr>
<td id="c_02" onclick="Pass_Content_Of_Cell(_param)">Flower</td>
</tr>
....
</table>
The function Pass_Content_of_Cell() must pass the contents of the cells clicked and concatenate the tags in a single string of tags: "Flower;Tree;" (WHAT it does is not relevant).
The user can click randomly on any tag and in any order he likes.
Question: What exactly should I use for _param ? I tried this.value and this.text and didn't get anything useful.
Try this
onclick="Pass_Content_Of_Cell(this.innerText)"
or if you want the markup,
onclick="Pass_Content_Of_Cell(this.innerHTML)"
Try this.innerText
<table id="table_of_tags">
<tr><td id="c_01" onclick="Pass_Content_Of_Cell(this.innerText)">Tree</td><tr>
<tr><td id="c_02" onclick="Pass_Content_Of_Cell(this.innerText)">Flower</td><tr>
</table>
If your are using a loop to generate the markup, why you simply didn't do something like:
<tr><td onClick="doSomething('$param')">$param</td></tr>
I cannot imagine the list is hardcoded...
<script type="text/javascript">
function save(val1)
{
alert("you have saved Employee "+document.getElementById(val1).innerText);
}
function del(val1)
{
alert("you have deleted Employee "+document.getElementById(val1).innerText);
}
</script>
<table border="1">
<tr>
<th>EmployeeID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Option</th>
</tr>
<tr>
<td>1590</td>
<td id="c1">Venkatesh</td>
<td>venki#w3s.com</td>
<td>9943243433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c1');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c1');"></td>
</tr>
<tr>
<td>1591</td>
<td id="c2">amarnath</td>
<td>amar#w3s.com</td>
<td>9943113433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c2');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c2');"></td>
</tr>
<tr>
<td>1601</td>
<td id="c3">naveen</td>
<td>navs#w3s.com</td>
<td>9943113433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c3');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c3');"></td>
</tr>
</table>
I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>
There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.
tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>
I'm trying to have "set all" radio buttons at the bottom of my popup control so when the user has a long list of conflicts to resolve, they can just select one of the radio buttons and the option will be quickly select. However, my javascript fires, and seems to find the radio button, but fails to actually set the radio button.
I have a gridview gvErrors that is being looped though and in the second cell of each gridview row is a table with the options (tblOptions). I have tried using .attr("checked", true), .setAttribute("checked", true), and .prop("checked", true). I am receiving no errors, in the console, but the radio buttons all remain unchecked. Any help with this would be appreciated. Below is the Javascript.
<script type="text/javascript" language="javascript">
function selectAll(option) {
var grid = document.getElementById("<%=gvErrors.ClientID%>");
for (var i = 0; i < grid.rows.length; i++)
{
var row = grid.rows[i];
var table = $(row).find("tblOptions");
var radio = $(table).find("input[name*=" + option + "]:radio");
//$('td input:radiobutton', '#tblOptions').prop('checked', true);
$(radio).prop("checked", "checked");
var test = "";
}
};
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbCancelAll.ClientID%>").click(function() {
selectAll("rdbCancel");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbReplaceAll.ClientID%>").click(function() {
selectAll("rdbReplace");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbRenameAll.ClientID%>").click(function() {
selectAll("rdbRename");
});
});
</script>
Small example of the gridview:
<table class="tableinfo nocollapse c6" cellspacing="1" cellpadding="2" border="0" id="ctl00_Main_gvErrors">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th scope="col"><span class="c1">Current Name</span></th>
<th scope="col"><span class="c1">Options</span></th>
<th scope="col">Differences</th>
</tr>
<tr class="tableinfobody">
<td class="l"><span id="ctl00_Main_gvErrors_ctl02_lblName">Test1</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl02_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl02$txtNewName" type="text" value=
"Test1_1" id="ctl00_Main_gvErrors_ctl02_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl02$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl02_hfParamInternalUnmatched" value=
"EBC1-Test1" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl02$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl02_hfParamInternalMatched" value="Test1" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">Unit</td>
<td class="c4"></td>
<td class="c4">flag</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoGray">
<td class="l"><span id="ctl00_Main_gvErrors_ctl03_lblName">Test2</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl03_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl03$txtNewName" type="text" value=
"Test2_1" id="ctl00_Main_gvErrors_ctl03_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl03$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl03_hfParamInternalUnmatched" value=
"HCMData3-Testw" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl03$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl03_hfParamInternalMatched" value=
"PrimaryData3-Testw" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">SA</td>
<td class="c4">3, 239</td>
<td class="c4">239</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoBlue">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
Any help clearing this up would be greatly appreciated.
Use the value as a selector like so
function selectAll(option) {
var radio = $("input[value=" + option + "]");
$(radio).prop("checked", "checked");
}
$('input[type="button"]').on('click', function(){
var value = $(this).data('attr');
selectAll(value);
});
http://jsfiddle.net/3u3z4bLn/3/
is there any reason why these table checkboxes would return a '1' or true statement whether they are checked or not?
<table>
<tr>
<td>Lake/Body Name:</td>
<td><input type="text" id="title"></td>
</tr>
<tr>
<td>Fishing:</td>
<td><input type="checkbox" value="1" id="fish"></td>
</tr>
<tr>
<td>Wakeboarding:</td>
<td><input type="checkbox" value="1" id="wake"></td>
</tr>
<tr>
<td>Skiing:</td>
<td><input type="checkbox" value="1" id="ski"></td>
</tr>
<tr>
<td>Tubing:</td>
<td><input type="checkbox" value="1" id="tube"></td>
</tr>
<tr>
<td>Comments:</td>
<td><input type="text" id="comments"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Save & Close" onclick="saveBoat()"></td>
</tr>
</table>
This is a content VAR for a google maps infowindow, BTW...
It depends on what Javascript you are using to check for it being "checked". Using .value on a checkbox element is not the same as using the .checked property. If you see, you are setting the value attribute for the checkbox elements in the HTML as 1. As I said before, this is unrelated to its checked state and is accessed differently.