Develop Reference

Radio button to check all boxes

<table class="table borderless">
<thead>
<tr>
<th>Rank</th>
<th>+/-</th>
<th>Searches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
<td><input type="checkbox" > Up</td>
<td><input type="checkbox" > Over</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
<td><input type="checkbox" > Down</td>
<td><input type="checkbox" > Under</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
<td><input type="checkbox" > No movement</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Not in top 100</td>
</tr>
</tbody>
</table>
Script:
$(document).ready(function () {
$(".custom").change(function () {
$(".custom").parent().find(".custom-selector").prop("checked", true);
})
});
What I need is a radio button that checks all the boxes when selected.
Right now nothing happens when I click the radio button. However, if I add this radio button:
<input type="radio" id="op5" value="1" name="options2" class="custom">
Then they both work. Even the initial one checks all the boxes.
What is this strange behavior? I'm missing something
EDIT: it appears the radio button must be outside the table? Can I have it inside somehow?

try:
$(".custom").closest("tbody").find(".custom-selector").prop("checked", true);
or Just:
$(".custom-selector").prop("checked", true);

Try this:
$(".custom").change(function () {
$(this).parents('tbody').find(".custom-selector:checked");
});
and some reference: https://api.jquery.com/checked-selector
eventually remove your action selector using .not(this)

Try this :
$(document).ready(function () {
$(".custom").change(function () {
$(".custom-selector").prop("checked", true);
})
});

Enabled/disabled buttons when one checkbox or more are checked

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

On Radio Select, show different checkbox selection

I'm looking for a Javascript or jQuery solution, either works.
Anyway, when a user selects one of the choices for the radio buttons, I want a different set of checkboxes to show up. So, if a user chooses By Name, the name checkboxes will show up. And then when the user chooses By Title, the name checkboxes will disappear and the title checkboxes will show up.
When a page loads, and an option is not chosen, no checkboxes should appear
Here is what the HTML looks like:
<table>
<tr>
<td><input type="radio" name="selectType" value="byName" />By Name</td>
<td><input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle2" />Title 2</td>
</tr>
</table>
What would this code look like?

I would use data attributes to reference groups of checkboxes. This way you can make your code really flexible and unobtrusive:
$('.type-check').change(function() {
$('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});
HTML sample:
<tr>
<td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
<td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>
http://jsfiddle.net/D8s9G/

First give your checkboxes classes..
<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2
do the same for titles and give them a class name of 'title' and for your radios too..
<input type="radio" name="selectType" value="byName" class="radioName" />
then;
$(document).ready(function () {
$('.radioName').click(function () {
$('.name').show();
$('.title').hide();
});
//same logic for titles..
});

Here is a working solution - http://jsfiddle.net/FloydPink/fkvSg/
jQuery:
$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);
$('input[name=selectType]').change(function () {
var byNameSelected = $(this).val() == 'byName';
$('.name').closest('tr').toggle(byNameSelected);
$('.title').closest('tr').toggle(!byNameSelected);
});
HTML:
<table>
<tr>
<td>
<input type="radio" name="selectType" value="byName" />By Name</td>
<td>
<input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName2" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
</tr>
</table>
I have added css classes to all the four checkboxes, so that the group of 'Name' and 'Title' checkboxes could be grouped.

You can select the inputs with their name and show or hide the relevant inputs:
$('input[value*="byName"]').click( function() {
$('input[name*="selectName1"]').show();
$('input[name*="selectTitle1"]').hide();
}
$('input[value*="byTitle"]').click( function() {
$('input[name*="selectName1"]').hide();
$('input[name*="selectTitle1"]').show();
}

Checkboxes and table data in HTML

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.

Manipulating a table with JavaScript/jQuery

I need to implement the following functionality in JavaScript/jQuery and its driving me nutts. I have an idea how I can implement this using lots of ids. However, I need to implement this using classes because these will be dynamic and it doesn't make sense to have a different id for every row.
Take the following table as an example:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK</span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
if the checkbox of John Doe is checked, I need to show the CHANGE span for the respective clicked checkbox. Therefore, I need to add this element using jQuery. The following will be the result:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK</span> <span class="defaultLocation">Change</span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
if the CHANGE span is clicked, I need to show the textbox for respective checkbox clicked. The following table will be the result:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK <input type="text" /></span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
If the John Doe checkbox is unchecked, the respective row is reverted back without the textbox and without the change span, like the first table
If more than one checkbox is clicked, the second, third and so on rows need to follow the same procedure without losing the functionality from previously clicked checkboxes.
If the CheckAll checkbox is clicked from the table header, then all rows must follow the procedure mentioned above.
I need to hear your opinions on the best practices on how to achieve this. I know the logic of it but I can't manage to program it with JavaScript and jQuery. For instance, with jQuery, when you store an element in a string so you can manipulate it with plain JavaScript, then you don't have simple access anymore to the DOM.
Any help would be greatly appreciated

Try this:
$(".myClass").click(function(){
if(this.checked){
var changeElement = getChangeElement()
$(this).parents('tr').children('.changable').append($(changeElement))
attachEventsToCHANGE()
}else{
$(this).parents('tr').children('.changable .defaultLocation').remove()
}
})
function getChangeElement(){
var changeElement= $("<span class='defaultLocation'>Change</span>")
$(changeElement).click(function(){
$(this).after("<input type='text' />")
$(this).remove()
})
return changeElement;
}
I havent tested it but I think it would help you!!

You could probably bind to the "changed" Event of all checkboxes. Within the Eventhandler you could probably do something along the lines of
function changeHandler(event) {
if ($(this).val('checked') == checked) {
$(this).parents('tr').children('.changeable').append('<span>bla<span>');
} else {
$(this).parents('tr').children('.defaultLocation').remove();
}
The click handler of the "Change" Span should be pretty straight forward.