I have a table that populates a table row with data when a checkbox in the rows first column is clicked. That part is working correctly. There is a header column with a 'Select All' checkbox. When that checkbox is selected, all rows should be populated and corresponding checkbox selected. This is working correctly on IE, but on Chrome and Firefox the data is populating but the checkboxes are not being selected. Any ideas?
$('.selectAll input[type="checkbox"]').change(function () {
var thistable = $(this).parents('table');
if (this.checked) {
populateOptions(thistable);
thistable.find('.hiddenUntilOrder').addClass('showItems');
thistable.find('tr').each(function () {
$(this).find('.distribution').rules("add", { required: true, messages: { required: "" } });
});
thistable.find('.checkbox').prop("checked", true);
} else {
thistable.find('.hiddenUntilOrder').removeClass('showItems').rules("remove");
thistable.find('tr').each(function () {
$(this).find('.distribution').rules("remove");
});
thistable.find('.checkbox').prop("checked", false);
}
});
Take a moment and read Decoupling Your HTML, CSS, and JavaScript - Philip Walton.
$('.js-selectall').on('change', function() {
var isChecked = $(this).prop("checked");
var selector = $(this).data('target');
$(selector).prop("checked", isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="js-selectall" data-target=".js-selectall1" />
<table>
<tr>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
</tr>
<tr>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
</tr>
</table>
Reusable and loosely coupled.
I have just coded in fiddle. Please look into it.
$(document).ready(function(){
$('#selectAll').click(function(){
$('.selectRow').prop('checked', true);
if(!$(this).prop("checked")) {
$('.selectRow').prop('checked', false);
}
});
$('.selectRow').change(function() {
if(!$(this).prop("checked")) {
$('#selectAll').prop('checked', false);
} else {
if ($('.selectRow:checked').length === $('.selectRow').length) {
$('#selectAll').prop('checked', true);
}
}
});
});
https://jsfiddle.net/sbwfcxnr/2/
Related
I want to control the dropdownlist to be enabled when the checkbox is checked by respective rows.
My current progress I manage to enable and disable the dropdownlist but its not controlled by the respective rows.
Whenever the checkbox is checked, all dropdownlist were enabled.
the php code is partly from html:
<td>
<select class="selection" name="lotDist[]" >
<option></option>';
==== sql queries in here ====
while ($row2 = sqlsrv_fetch_array($stmt,SQLSRV_FETCH_ASSOC))
{
echo '
<option value="'.$row["LotNo"].' / '.$row2["Grouping"].' - '.$row2["InBulkForm"].'">
'.$row2["Grouping"].' - '.$row2["InBulkForm"].'</option> ';
}
echo '
</select>
</td>
<td>'.$row["LoadingWeek"].'</td>
<td>
<input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row["LotNo"].'" '.$check.'>
</td>
<script>
$(document).ready(function() {
$('.selection').attr('disabled', 'disabled');
var $checkBox = $('.chkBox');
$checkBox.on('change', function(e) {
//get the previous element to us, which is the select
var $select = $('.selection')
if (this.checked) {
$select.removeAttr('disabled');
} else {
$select.attr('disabled', 'disabled');
}
});
});
</script>
With $(this).closest('tr').find('.selection'); you can find the corresponding select box the belongs to the row of the changed checkbox.
The closest() function finds the first parent that matches the selector. Since you are using a table we can select the row with the tr selector and find the corresponding select element within the row.
Also changed the way the select box is enabled and disabled. It's better to change the property then the attribute. and code is shorter too. However your method works as well.
$(document).ready(function() {
$('.selection').attr('disabled', 'disabled');
var $checkBox = $('.chkBox');
$checkBox.on('change', function(e) {
var $select = $(this).closest('tr').find('.selection');
$select.prop('disabled', !this.checked);
/* This works too but its better to change the property and the code is shorter when using the this.checked boolean.
if (this.checked) {
$select.removeAttr('disabled');
} else {
$select.attr('disabled', 'disabled');
}
*/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="selection" name="lotDist[]">
<option>1</option>
<option>2</option>
</select>
</td>
<td>week</td>
<td>
<input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row[" LotNo "].'" '.$check.'>
</td>
</tr>
<tr>
<td>
<select class="selection" name="lotDist[]">
<option>1</option>
<option>2</option>
</select>
</td>
<td>week</td>
<td>
<input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row[" LotNo "].'" '.$check.'>
</td>
</tr>
</table>
I have to clone my <tr> and I have list of checkbox like code below and when I add new row with list of checkbox and then I click on check box to show value in textbox field_resultsthe value not show only on first textbox not yet clone.
How when I add new tr and then when I click on which list of checkbox in which tr they will show value of my click in the same tr.
$("#add-new").on("click", function () {
$tr = $(this).closest("tr").next().clone(true);
$tr.insertAfter($(this).closest("tr"));
});
$(document).ready(function () {
$checks = $('#mych_box :checkbox');
$checks.on('change', function () {
var string = $checks.filter(":checked").map(function (i, v) {
return this.value;
}).get().join(",");
console.log(string);
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<button type="button" id="add-new">Add New</button>
</td>
</tr>
<tr>
<td>
<input type="text" id="field_results" name="field_results[]"/><br>
<div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
<label>
<input type="checkbox" id="virt_software_chb1" name="virt_software[]" value="White"/>White
<input type="checkbox" id="virt_software_chb2" name="virt_software[]" value="Red"/>Red
<input type="checkbox" id="virt_software_chb3" name="virt_software[]" value="Blue"/>Blue
</label>
</div>
</td>
</tr>
As defined above use true in clone to bind default events and use class instead of id to group element
$(".virt_software_chb").on('change', function () {
var string = $(this).closest('td').find('.virt_software_chb').filter(":checked").map(function (i, v) {
return this.value;
}).get().join(",");
$(this).closest('td').find('.field_results').val(string);
});
$("#add-new").on("click", function () {
$tr = $(this).closest("tr").next().clone(true);
$tr.insertAfter($(this).closest("tr"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button type="button" id="add-new">Add New</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="field_results" name="field_results[]"/><br>
<div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
<label>
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="Red"/>Red
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
</label>
</div>
</td>
</tr>
</table>
withDataAndEvents (default: false)
A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well. - clone()
Try passing in true and see what you get.
$tr = $(this).closest("tr").next().clone(true);
I have these radio buttons:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input id="rooom" name="room" type="radio" value="single"><strong>Single Room: 85 euros</strong></td>
<td width="30"></td>
<td><input id="rooom" name="room" type="radio" value="double"><strong>Double Room: 95 euros</strong></td>
</tr>
</table>
And I want to the value to appear in this input:
(...)
<td><label>Cost of Accomodation =</label></td>
<td width="5"></td>
<td><input id="cost" class="input_reg_cost" name="cost" type="text"></td>
(...)
This is my script but it isn't working, I don't know if it is abotu he the syntax or an error mine.
$("#rooom").change(function() {
var sel = $(this).val();
if (sel=='single') {
$("#cost").val('85')
}
if (sel=='double') {
$("#cost").val('95')
}
It's the syntax:
$(".rooom").change(function () {
var sel = $(this).val();
if (sel == 'single') {
$("#cost").val('85');
}
if (sel == 'double') {
$("#cost").val('95');
}
});
Remember to always close jQuery functions with });
rooom is also a class, not an id, so you'll want to replace that # with a .
<div>
<input type="radio" name="check" value="cash" checked/>cash
<input type="radio" name="check" value="credit" />credit
</div>
<table>
<tbody id="cash">
<tr>
<td>
Cash User name:
</td>
<td>
<input type="text" name="cash1" />
</td>
</tr>
</tbody>
<tbody id="credit">
<tr>
<td>
credit User name:
</td>
<td>
<input type="text" name="credit1" />
</td>
</tr>
</tbody>
</table>
In the div tag I am having two radio buttons. By default I have made the radio button named cash checked now. What I want is that when radio button cash is checked tbody with id cash is shown and tbody with id credit hidden and when radio button with name credit is checked then tbody with id credit is shown and other tbody to be hidden. I have done it with jQuery but I want it to do with Javascript.
If you are willing to go for a pure CSS solution, than you have to get rid of the div around your radio buttons
Demo
tbody {
display: none;
}
input[value="cash"]:checked + input[value="credit"] + table tbody[id="cash"] {
display: table-row-group;
}
input[value="credit"]:checked + table tbody[id="credit"] {
display: table-row-group;
}
Note: Just make sure you declare some class and make these selectors
specific, else it will target all the elements in the above
combination in the document.
Here is the Javascript code, to be written after the HTML:
var radios = document.getElementsByName("check");
for( var i = 0; i < radios.length; i++){
switch( radios[i].value){
case "cash":
radios[i].onclick = function(){
document.getElementById("credit").style.display = 'none';
document.getElementById("cash").style.display = 'block';
};
break;
case "credit":
radios[i].onclick = function(){
document.getElementById("cash").style.display = 'none';
document.getElementById("credit").style.display = 'block';
};
break;
}
if( radios[i].checked){
radios[i].click();
}
}
The code is running at http://jsfiddle.net/2sPGn/
Javascript Code
<script>
function showData(obj) {
if ( obj.value == "cash") {
document.getElementById("cash").style.display = '';
document.getElementById("credit").style.display='none';
} else {
document.getElementById("cash").style.display = 'none';
document.getElementById("credit").style.display='';
}
}
</script>
HTML
<div>
<input type="radio" name="check" value="cash" onclick='showData(this);' checked/>cash
<input type="radio" name="check" value="credit" onclick='showData(this);' />credit
</div>
<table>
<tbody id="cash">
<tr>
<td>Cash User name:</td>
<td>
<input type="text" name="cash1" />
</td>
</tr>
</tbody>
<tbody id="credit" style='display:none'>
<tr>
<td>credit User name:</td>
<td>
<input type="text" name="credit1" />
</td>
</tr>
</tbody>
</table>
I think this will help you :
$(document).ready(function(){
$('#cash,#credit').hide();
$('input[type=radio]').change(function(){
$('#'+$(this).attr('value')).show();
});
});
All,
I have the following code. How can I fix it so that the category checkbox for each category is checked only if all the items under that are checked?
Thanks
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script language="JavaScript">
function toggleTableRows()
{
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(
function() {
$(this).attr("title","Click to Collapse")
$(this).attr("src","arrow_expanded.gif");
$('tr').siblings('#child-'+this.id).toggle();
},
function() {
$(this).attr("title","Click to Expand");
$(this).attr("src","arrow_collapsed.gif");
$('tr').siblings('#child-'+this.id).toggle();
}
);
initCheckBoxes();
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" :checkbox[name^='"+ field +"[']").attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var checked = ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length);
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" :checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script language="JavaScript">toggleTableRows();</script>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
<td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
<td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td> Apple</td>
<td><input type="checkbox" value="0" name="chk0[1]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td> Banana</td>
<td><input type="checkbox" checked value="0" name="chk0[2]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td> Orange</td>
<td><input type="checkbox" checked value="0" name="chk0[5]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr><td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td><td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td></tr>
<tr style="display: none;" id=child-1><td> Cabbage</td><td><input type="checkbox" checked value="0" name="chk1[21]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-1><td> Tomatoes</td><td><input type="checkbox" value="0" name="chk1[26]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
<tr style="display: none;" id=child-1><td> Green Peppers</td><td><input type="checkbox" checked value="0" name="chk1[29]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td></tr>
</table>
</form>
</body>
</html>
gave it a try + some notes which you really should apply too
Some things I fixed to be able to work with this thing
missing title attribute in head (added)
Both img-tags have invalid numeric-only id (changed to make a valid id)
Multiple tr's with id child-0 (made ids unique but still based on img id)
Multiple tr's with id child-1 (made ids unique but still based on img id)
alt attribute on both img-tags missing (added)
too-many inline javascript onclick handlers (removed/ replaced with jQuery bindings and jQuery to find right parameters)
too-many inline css on some tr's (removed/replaced with css class)
missing type attribute on the script tags (added)
initcheckboxes is called without parameter, thus won't work as selector (added param to toggleTableRows)
made some of the jQuery foo more flexible and robust
Fixed HTML + javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;charset=ascii">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script type="text/javascript" language="JavaScript">
function toggleTableRows(form) {
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(function() {
var x = $(this);
x.attr("title","Click to Collapse")
.attr("src","arrow_expanded.gif");
x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
}, function() {
var x = $(this);
x.attr("title","Click to Expand")
.attr("src","arrow_collapsed.gif");
x.parents("tr").eq(0).siblings("[id^=child-"+x.attr("id")+"]").toggle();
});
initCheckBoxes(form);
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" input:checkbox[name^='"+ field +"[']").attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var name = current.name.replace(/\[[^\]]*\]/, "");
var selected = $("input:checkbox[name^='" + name + "[']");
var checked = (selected.size() == selected.filter(":checked").size());
$("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" input:checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script type="text/javascript" language="JavaScript">toggleTableRows("frmDinnerMenu");</script>
<script type="text/javascript">
$(document).ready(function() {
$("tr:not([id]) input").click(function() {
var ele = $(this);
toggleCheckboxes(this, ele.parents("form").eq(0).attr("name"), ele.attr("name"));
ele=null;
});
$("tr[id] input").click(function() {
toggleParentCheckboxes(this, $(this).parents("form").eq(0).attr("name"))
});
});
</script>
<style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="post" action="">
<table border="1">
<tr>
<td><img class="parent" id="i0" src="arrow_collapsed.gif" alt="fruits" title="Click to Expand" name="0">Category - Fruits</td>
<td><input type="checkbox" name="chk0"></td>
</tr>
<tr class="c1" id="child-i00">
<td>Apple</td>
<td><input type="checkbox" value="0" name="chk0[1]"></td>
</tr>
<tr class="c1" id="child-i01">
<td>Banana</td>
<td><input type="checkbox" checked value="0" name="chk0[2]"></td>
</tr>
<tr class="c1" id="child-i02">
<td>Orange</td>
<td><input type="checkbox" checked value="0" name="chk0[5]"></td>
</tr>
<tr>
<td><img class="parent" id="i1" src="arrow_collapsed.gif" alt="vegetable" title="Click to Expand" name="1">Category - Vegetables</td>
<td><input type="checkbox" name="chk1"></td>
</tr>
<tr class="c1" id="child-i10">
<td>Cabbage</td>
<td><input type="checkbox" checked value="0" name="chk1[21]"></td>
</tr>
<tr class="c1" id="child-i11">
<td>Tomatoes</td>
<td><input type="checkbox" value="0" name="chk1[26]"></td>
</tr>
<tr class="c1" id="child-i12">
<td>Green Peppers</td>
<td><input type="checkbox" checked value="0" name="chk1[29]"></td>
</tr>
</table>
</form>
</body>
</html>
So I'm going to try and answer this question (hey, it's a challenge!).
First let me point out why people don't like your question though:
Duplicate ids: id=child-1 appears multiple times, as do others. Ids should be unique, otherwise you'll run into selector problems (getElementById really doesn't like it)
Inline javascript: It's hard to determine from looking at the code what actions happen when. You should isolate all functionality in a separate script file. This will make maintenance significantly easier in the future, and allow the browser to cache functionality.
     .... consider using "padding-left: 15px". Do it for us.
That all being said, consider using a more targeted selector. In this example, notice name^=
function toggleParentCheckboxes(current, form) {
var name = current.name.replace(/\[[^\]]*\]/, "");
var selector = ":checkbox[name^='" + name + "[']";
var checked = ($(selector).length == $(selector + ":checked").length);
$("#"+ form +" :checkbox[name='" + name + "']").attr("checked", checked);
}