We Keep Coding

Clone tr and checkbox event in jQuery

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);

Change all the dropdown option' s value when the checkbox is checked

I'm wondering when i check the checkbox (Select all), can all the dropdowns be forced to select "Y"
if it's unchecked, all the dropdowns will be forced to select "N"
Many thanks.
var check = $('#check');
check.onclick(function(){
$('.option') = "Y";
})
<table id="table">
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
Orginally i have a table that show the total amount needs to be paid and payment in arrears
$(document).ready(function() {
$("#table").on('input', '.txtCal, .status', function() {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var to_be_paid = 0;
$("#table tr").each(function() {
var get_textbox_value = $('.txtCal', this).val();
var get_payment_status = $('.status', this).val();
if (get_textbox_value && get_payment_status) {
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if (get_payment_status === 'N') {
to_be_paid += parseFloat(get_textbox_value);
}
}
});
$(".total_sum_value").html(calculated_total_sum);
$(".arrears").html(to_be_paid);
}
calculate();
});
HTML
<div class="col-lg-6 result">
<div class="input-group">
<p>
<span class="input-group-addon">Total Payment</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon total_sum_value"></span></p>
<br><br><br>
<p>
<span class="input-group-addon">In Arrears</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon arrears"></span></p>
</div>
Each table row will have a select dropdown that consists of two option "Y" and "N". Originally, i have to manually change its table row option, and the payment in arrears will change accordingly.
For example, if the dropdown is "Y" which means paid, the amount of payment in arrears will decrease automatically.
Now after adding the select all function, to force all dropdowns to select "Y",for some reason the calculate function fail to work.
Any ideas

Add a common class to all the select and value to the option. Trigger a function on checking the checkbox which will select all Y option.Use jquery 'prop' method to add the property
function selectAll(elem) {
if ($(elem).prop('checked')) {
$('.selOptions option[value=Y]').prop('selected', true);
} else {
$('.selOptions option[value=N]').prop('selected', true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>
select all <input type="checkbox" onchange="selectAll(this)">
</th>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
</table>

Using vainilla JS
<table>
<th>
select all <input id="selectAll" type="checkbox" />
</th>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
</table>
<script>
var selectAll = document.getElementById('selectAll');
var options = document.getElementsByTagName('select');
selectAll.addEventListener( 'change', function() {
if(this.checked) {
for(var i=0; i < options.length; i++) {
options[i].selectedIndex = 0;
}
}
});
</script>

First determine when the checkbox is checked or not.
$('#check').on('change', function() { if ($(this).is(':checked')) {...
Then you could use a selector based on an option's text content (you don't have a value attribute which you should but it's still functional.)
$('option:contains(Y)')...
Then use .prop() method to programmatically change it's selected state.
.prop('selected', true);
Demo
$('#check').on('change', function() {
if ($(this).is(':checked')) {
$('option:contains(Y)').prop('selected', true);
} else {
$('option:contains(N)').prop('selected', true);
}
});
<table>
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

When non of the options are selected for the checkboxes, how to make the value none?

I've my code below and I'm using an array here. I'm trying to print "None" value when none of the options are selected, but instead when I submit the form I have a few checkboxes selected; it still says "None". Without the else if condition when I choose to not select one of the option, then I get nothing for the result.
I'm not supposed to create a "None" option for the input function.
function calculatePrice() {
var array = [];
var extras = document.calc.extras;
for (count = 0; count < extras.length; count++) {
if (extras[count].checked == true) {
array.push(extras[count].value);
} else if (!extras[count].checked) {
array = ["None"];
}
}
alert("(Including extras: " + array + ")");
}
<form name="calc">
<table>
<tr>
<td colspan="40" id="col">
<label for="extras">EXTRAS</label>
<div class="left">
<input type="checkbox" name="extras" id="ac" value="A/C">A/C (+$10)
<input type="checkbox" name="extras" id="work" value="Working Brakes">Working Brakes (+$100)<br>
<input type="checkbox" name="extras" id="cruise" value="Cruise Control">Cruise control (+$20)
<input type="checkbox" name="extras" id="seat" value="Baby Seat">Baby Seat (+$30)<br>
</div>
</td>
</tr>
<tr>
<td colspan="40" id="col">
<input type="submit" onClick="calculatePrice();" value="Estimate Cost">
</td>
</tr>
</table>
</form>

The problem is that you're replacing array with ["None"] every time there's an empty checkbox, not if all of the checkboxes are empty.
The simplest fix is to check after the loop if array is empty, e.g.:
for (count = 0; count < extras.length; count++) {
if (extras[count].checked == true) {
array.push(extras[count].value);
}
}
if (array.length === 0) {
array = ["None"];
}
Here it is in a working snippet:
function calculatePrice() {
var array = [];
var extras = document.calc.extras;
for (count = 0; count < extras.length; count++) {
if (extras[count].checked == true) {
array.push(extras[count].value);
}
}
if (array.length === 0) {
array = ["None"];
}
alert("(Including extras: " + array + ")");
}
<form name="calc">
<table>
<tr>
<td colspan="40" id="col">
<label for="extras">EXTRAS</label>
<div class="left">
<input type="checkbox" name="extras" id="ac" value="A/C">A/C (+$10)
<input type="checkbox" name="extras" id="work" value="Working Brakes">Working Brakes (+$100)<br>
<input type="checkbox" name="extras" id="cruise" value="Cruise Control">Cruise control (+$20)
<input type="checkbox" name="extras" id="seat" value="Baby Seat">Baby Seat (+$30)<br>
</div>
</td>
</tr>
<tr>
<td colspan="40" id="col">
<input type="submit" onClick="calculatePrice();" value="Estimate Cost">
</td>
</tr>
</table>
</form>

How to get value of checkbox in table?

How can I get value of checkbox in table? I want use it for in this case in order get parameter. Now, please see html table:
<table id="div_func" class="table table-bordered" style="width: 100%">
<thead>
<tr>
<th>
<input type="checkbox" id="chk_all" /></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D01" /></td>
<td>Banana </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D02" /></td>
<td>Orange </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D03" /></td>
<td>Apple </td>
</tr>
</tbody>
</table>
And this is my script , I use for get value in checkbox , then put parameter
function add_funcgroup() {
var func_group = [];
var chk_allow = "";
var table = document.getElementById("div_func");
for (var i = 0; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
chk_allow = "True";
}
else {
chk_allow = "False";
}
var group_func = {
GROUP_MOD_ID: id_temp,
FUNCTION_MOD_ID: $('#chk')[i].val(),
ALLOW: chk_allow
};
func_group[i] = group_func;
}
var func_group_temp = {
FUNC_MOD: func_group
};
var DTO = {
'func_group_temp': func_group_temp
};
$.ajax(
{
And it's not working.

What you have done is right, but you are not outputting it to the table!
var table = $("#div_func");
var value_check = "";
for (var i = 1; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
value_check += i + ": " + $('#chk')[i].val();
}
}
alert(value_check);
And you aren't appending it, instead saving!

Try to this
$('#div_func tbody tr input:checkbox').each(function() {
if (this.checked) {
//Do something
}
});.

toggle tbody of table with javascript

<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();
});
});