Check multiple Checkbox jQuery - javascript

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...]")

Related

getElementById or getElementsByName with an array tag

I'm lost with this. First, I made an array in php (reason? Fetch all values of a column into an array, to use later) and "save" like this:
echo '<input type="hidden" name="hidden[]" id="hidden[]" value="'.$to_update.'">';
Then, I made a select with some values and chars, also constructed with php. Like this:
echo '<option value="'. $id .'">'. $desc .'</option>';
The fetched values are correct, $id $desc and $to_update have the value I require.
Then, in php/html I have this code:
<select name="articulo" id="articulo" onchange="myFunc(this.value)">
<input name="updated" id="updated" type="text" />
So, when calling in js is like this (same html, after body tag):
<script >
function myFunc(val) {
var id = document.getElementById("updated");
var valor = document.getElementsByName("hidden");
id.value = valor[val].value;
}
</script>
So, for example, if in select Is 1, 2 and 3 values; one, two and three options, I want to change the input text called updated to another values, like a, b and c.
Is it a better way to do it, or just to fix some code?
I've solved my issue by luck.
I used a push into an array in the PHP with this:
echo "<script>
var pausecontent = new Array();
pausecontent.push('".$to_update."');
</script>";
and then in JavaScript fetch/retrieve/access the array like this:
var valor = pausecontent[val - 1];
id.value = valor;
Works like a charm, without need of another hidden tag.

Hide Elements So they will no Post Data

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.

Setting values of selected checkbox

I have checkboxe that will dynamically appear number of times based on my database. Each checkbox Id is generated dynamically. Where initial value of $i is 1.
<input type="checkbox" name="ch[]" id="<?php echo $i - 1;?>" />
Now want to set value of each selected checkbox to 1 and 0 to all unselected checkbox in real time . Plz help me.
If I understood correctly, to set values in real time you need to do the following:
$("[name='ch[]']").on("change", function() {
this.value = +this.checked;
});
DEMO: http://jsfiddle.net/MMSFB/
If I understand correctly you want to toggle the values of the checkboxes. I would suggest using jquery and something like this:
php:
<input type="checkbox" class="toggleable" name="ch[]" id="<?php echo $i - 1;?>" />;
javascript:
$(".toggleable").each( function(i, elem) {
elem.checked=!elem.checked;
});

Get value of same class but diff id of checkbox, when a button is clicked

I want to get the value of the checkbox when #catDelete is clicked.
Below is the html code
<?php $i=1; do { ?>
<input type="checkbox" value="<?php echo $row_cat['cat']; ?>" class="checkboxcat" id="<?php echo $i; ?>" name="catcheckbox" style="border:#cccccc 1px solid; background-color:#fff;"><?php echo $row_cat['cat']; ?>
<span id="CatDelete" style="position:relative; left:10px; color:#ff0000; font-size:10px;">Delete</span>
<?php $i++; } while ($row_cat = mysql_fetch_assoc($cat)); ?>
jquery code - It gives me the value of the first checkbox
$('#CatDelete').click(function(){
alert($('.checkboxcat').attr('id'));
});
Any help appreciated. Did search if there was a duplicate question, but did not find.
You haven't shown much of your stucture, but it looks like the checkbox is a sibling element prior to the span. If so:
$("#CatDelete").click(function() {
var val = $(this).prevAll('input').first().val();
console.log(val);
});
That starts from the clicked element, works backward through siblings looking for input elements, grabs the first one, and gets its value.
But you've edited the question now to say it's in a loop. You cannot have more than one element with the same id ("CatDelete"). You'll need to change the span to use a class instead, and then change the above to use that class. So for instance, if you change it to use the class "CatDelete", then:
// v--- Note the change
$(".CatDelete").click(function() {
var val = $(this).prevAll('input').first().val();
console.log(val);
});
Live Working Copy | Source
But I think I'd probably adjust the structure slightly so that you're not hunting through sibling elements like that. If you put each pair (checkbox and button) inside a container, like a div, you can do something a bit more straightforward to find the matching input:
var val = $(this).closest('div').find('input').val();
E.g.
$(".CatDelete").click(function() {
var val = $(this).closest('div').find('input').val();
console.log("The value for the checkbox is: " + val);
});
Live Working Copy | Source

Javascript - Checkbox onclick-+ operations

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.

Categories