i'm working on a project and try to do something with checkboxes.
when a user click to a checked checkbox total value is - reverse is +
this is my code. i use recal function to do that check box is checked and send it to js as true
echo "<td><input type=checkbox name='check1' value='".$info['eventCategory']."' onclick='recal(" . $info['totalEvents'] . ",true)' checked></td><td>" . $info['id'] . " " . $info['name'] . "</td>";
function recal(val,sum)
{
if(sum)
{
var total = document.getElementById("total").innerHTML;
total+=val;
document.getElementById("total").innerHTML=total;
}
}
</script>
when sum is come as true it doesnt not sum the value :S
looks to me like a type casting problem - change this line:
var total = document.getElementById("total").innerHTML;
to this:
var total = parseInt(document.getElementById("total").innerHTML, 10);
Also try looking at this example it should give You more overview what could've go wrong.
Related
I have this code to get back a json string:
$.getJSON("<?php echo BASE_URL; ?>/editTask.php?ID="+tid,function(result){
$.each(result.staff, function() {
$("#checkbox[value=" + this + "]").prop('checked');
});
});
The json looks like this
{"staff":[13,17,15]}
I have a PHP snippet like this
<div id="checkbox" class="checkbox" style="max-height:150px;overflow:auto;">
<?php
for ($i = 0; $i < count($user_list); ++$i) {
echo '<label>'
.'<input type="checkbox" name="tasksUser[]"
value="'.$user_list[$i]['uid'].'">'
.$user_list[$i]['surname'].', '.$user_list[$i]['forename']
.'</label><br />';
}
?>
</div>
I want that every checkbox that has the value that is in result.staff be checked. But I think I have an error in my each part. But in the Firefox console is no error showing.
Could you help me?
Yes there is an issue in your $.each function.
$.each(result.staff,
function() {
$("#checkbox[value=" + this + "]").prop('checked');
^
Here is the issue.
});
});
As you don't have any id or class associated with element you can access it using element name/+type
You must replace your code with
$("input[type='checkbox'][value=" + this + "]").prop("checked", true);
Here I am accessing all checkboxes with values available and setting checked as true.
You're using this selector to look for checkboxes:
$("#checkbox[value...]")
However, the # symbol in a selector looks for an element with that ID.
The checkboxes in your PHP loop do not have a specified ID or class, so you could select them with:
#(":checkbox[value...]")
Below is my code, I want to get the count of checked checkboxes of all pages in my DataTable. Please advice how to proceed
<td align="center"><input type="checkbox" align="center" id="all" class="groupCheckBox" name="emails[]" value=' . $user['id'] . '></td>
Below code I used for get the values of checked boxes in all pages on button click
$('#merge_button').click(function () {
var id = "";
var oTable = $("#userTable").dataTable();
$(".groupCheckBox:checked", oTable.fnGetNodes()).each(function () {
if (id != "") {
id = id + "," + $(this).val();
} else {
id = $(this).val();
}
document.getElementById("email").value = id;
});
});
but now I want to count the checkedboxes without button click function whenever user clicked on checkboxes and deduct count when unchecking boxes . pls advice
var table = $("#userTable").DataTable();
var countchecked = table
.rows()
.nodes()
.to$() // Convert to a jQuery object
.find('input[type="checkbox"].groupCheckBox:checked').length;
Uses the most recent API
"...please be aware that using deferRender will cause some nodes to be created only when they are required for display, so they might not be immediately available when this method is called." from https://datatables.net/reference/api/rows().nodes()
Quite easy.
$("td input[type='checkbox']:checked").length;
I made a little page to track project times and write them into a database. I have two input fields for start and end time that will be calculated via a small JS script and the help of moment.js to show the total hrs. When there are values in the database already they are placed into the input fields as default value. When I now just tab through the input fields the script will calculate the value 0. I inspected the DOM and on both input fields it is correctly showing the right timestamps for both value and defaultvalue. What am I missing, and why is the JS triggered if I set it to be onChange?
JS
function TimeDifference(a) {
var start = moment(document.getElementById('Start_'+a).value,'HH:mm');
var stop = moment(document.getElementById('Finish_'+a).value,'HH:mm');
document.getElementById('sum'+a).value = moment.duration(stop-start).asHours();}
HTML
<input class='timebox' type='text' id='Start_" . $i . "' onkeypress='return isNumberKey(event) ' onChange='TimeDifference(" . $i . ")' value='{$db_start}' >
<input class='timebox' type='text' id='Finish_" . $i . "' onkeypress='return isNumberKey(event)' onChange='TimeDifference(" . $i . ")' value='{$db_stop}'>
<input id='sum" . $i . "' class='sumbox' readonly disabled='disabled' style='border:0px;'>
So i have input checkbox code like this:
<input type='checkbox' name='cek[]' class='check1' value='$data[id_usulan]' >
And there is an input text with id = test2, so when i click the checkbox, the input text value will change to checkbox value (there's no problem with this), i use this javascript code to do it:
$("input[type=checkbox]").click(function(){
var sum=0;
if ($("input[type=checkbox]").is(':checked')) {
$("input[type=checkbox]:checked").each(function(index){
sum += Number($(this).val().replace( /[^\d.]/g,''));
});
}
$("#test2").val(sum);
} );
And then i change the checkbox:
<input type='checkbox' name='cek[]' class='check1' value='$data[id_usulan]/$data[jml_harga]' >
As you can see, i tried to use 2 value in one checkbox ($data[id_usulan] and $data[jml_harga], separated by '/' ), but i just want to use one value ($data[jml_harga]) for $(this).val(), well you might think that if i want to use $data[jml_harga] then i don't have to make 2 value, but don't ask that, there's another reason for why i use 2 value.
So this is what I have tried:
$("input[type=checkbox]").click(function(){
var sum=0;
if ($("input[type=checkbox]").is(':checked')) {
$("input[type=checkbox]:checked").each(function(index){
var explode = $(this).val().split('/');
var price = explode[2];
sum += Number(price.replace( /[^\d.]/g,''));
});
}
$("#test2").val(sum);
} );
But when i click the checkbox, the input text value didn't change to checkbox value and remains the same as before I check, so how to fix this problem?
If anyone has a way to solve this, please help me.. :)
Here is the problem:
var price = explode[2];
The second value is:
var price = explode[1];
I have a form with several tables with many input fields in each.
Above each Table I have an <h2> where I do this:
$retVal .= "<h2><input value='{$category}' type='checkbox' name='Categories[]' onclick='CheckboxCategory($category);' checked='checked' /> " . $MSCategories[$i] ."</h2>";
// below this is table
$retVal .= "<table id=\"tableId{$category}\" class=\"search_table\" style='border-spacing: 0px;'>\n";
// edited out
$retVal .= "</table>";
The idea is, if they check this box (in <h2>), it runs this script:
function CheckboxCategory(catUniqueKey) {
// jQuery
if ($("#tableId" + catUniqueKey).is(":visible")) {
$("#tableId" + catUniqueKey).hide();
} else {
$("#tableId" + catUniqueKey).show();
}
}
I want to hide this specific table so that it doesn't post any values from it (rather than user going down and unchecking a few dozen boxes). This top checkbox I'd like to take care of that.
But apparently, if a checkbox is checked, when the table is hidden, it still posts that value.
Is there something else I can do besides hide that actually removes any traces of this part of the form?
The hidden elements will be posted to the server but the disabled will not be posted so you have to disable the elements
try this
function CheckboxCategory(catUniqueKey) {
// jQuery
if ($("#tableId" + catUniqueKey).is(":visible")) {
$("#tableId" + catUniqueKey).hide();
$("#tableId" + catUniqueKey).prop('disabled',true);
} else {
$("#tableId" + catUniqueKey).show();
$("#tableId" + catUniqueKey).prop('disabled',false);
}
}
I think if you disablethe element along side with hiding it will do it.