I'm trying to get all the values of my selected checkboxes into a textarea. The checkboxes and their values are taken from a DB. I don't know why, but the only thing my textarea is giving me is the word 'on' when something is selected.
these are the checkboxes:
<div class="controls" id="c_b">
<?php
echo "<ul>";
while($user = $allUsers->fetch_assoc())
{
echo "<li><input type='checkbox'> " . $user['username'] . " </input></li>";
}
echo "</ul>";
?>
<br />
</div>
and this is the function:
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
thanks in advance,
I hope somebody can see what I'm missing!
Jana
If you don't set a value on a checkbox, it will default to on if checked. You need to set the value to each username.
<input type="checkbox" value="bob" />
You may add the attribute value to the checkbox: http://jsfiddle.net/RNdFS/
You can try
$('#c_b input[type=checkbox]:checked').each(function() {
allVals.push($(this).val());
});
Related
i have a problem with checkbox . i want to check all when the first checkbox is checked. this is my code
<tr>
<td><label for="">Pilih Pendidikan</label></td>
<td style="text-align:left;">
<input type="checkbox" id="pilih_semua_pdk">Pilih Semua
<?php foreach ($query2 as $row2) {?>
<input class="form-control required check_pdk" type="checkbox" name="pendidikan[]" value="<?php echo $row2[id_pendidikan]; ?>"
<?php
$pendidikan = $_POST[pendidikan];
if ($pendidikan !=NULL) {
foreach($pendidikan as $pendidikan){
if ($pendidikan == $row2[id_pendidikan]) {
echo "checked";
}
}
}
?>
><?php echo $row2[nama_pendidikan]; ?>
<?php } ?>
</td>
</tr>
i try this code but doesnt work
<script>
$("#pilih_semua_pdk").click(function () {
$(".check_pdk").prop('checked', $(this).prop('checked'));
</script>
Try this, you need to bind an click event on first checkbox. On click of the first checkbox check if that is checked!. If yes then find all checkbox to get going.
$('#pilih_semua_pdk').on('click', function(){
if( $(this).is(':checked'))
{
//find parent td and its all checkboxes excluding first
$(this).parent().find('input[type=checkbox]').not('#pilih_semua_pdk').each(function(){
$(this).prop('checked', true);
});
}
});
jQuery makes this a piece of cake.
$(document).ready(function(){
// DOM has been loaded, attach click event for first checkbox
$('#pilih_semua_pdk').on('click', function(){
// verify if it is checked
if($(this).is(':checked'))
{
// check/tick the remaining checkboxes of the same td
$(this).siblings('.check_pdk').prop('checked', 'checked');
}
else
{
// do something when the first checkbox is unchecked
}
});
});
how can i one to one change the value of the next input?
this code doing check all or unchec all, but i want to check or uncheck one to one,
jQuery(document).ready(function() {
jQuery('#topluekle').click(function() {
if(jQuery(this).attr('checked')) {
jQuery('input:checkbox').attr('checked',true);
jQuery('input:text').attr('value','E');
} else {
jQuery('input:checkbox').attr('checked',false);
jQuery('input:text').attr('value','H');
}
});
});
Sample code:
<form>
<? for($i=1;$i<=5;$i++) { ?>
<input type="checkbox" id="pgun[]" name="pgun[]">
<input size="1" type="text" name="degerler[]" id="degerler[]" value="H">
<br />
<? } ?>
<label class="checkbox">
<input type="checkbox" value="E" name="topluekle" id="topluekle">
Check / Uncheck All *
</label>
</form>
Try
jQuery(function ($) {
$('#topluekle').click(function () {
$('input[name="pgun[]"]').prop('checked', this.checked);
$('input[name="degerler[]"]').val(this.checked ? 'E' : 'H');
});
});
Use val() like,
jQuery('input:text').val('H');
and use prop() in place of attr() like
jQuery(document).ready(function() {
jQuery('#topluekle').click(function() {
if(jQuery(this).prop('checked')) {
jQuery('input:checkbox').prop('checked',true);
jQuery('input:text').val('E');
} else {
jQuery('input:checkbox').prop('checked',false);
jQuery('input:text').val('H');
}
});
});
If you want to change value for each checkbox click then you can try,
jQuery(document).ready(function() {
jQuery('input[name="pgun[]"]').click(function() {
var newVal=$(this).next('input:text').val()=='E' ? 'H' : 'E';
$(this).next('input:text').val(newVal);
});
});
It will change corresponding text box's value of checkbox
jQuery(document).ready(function() {
var txtObj = $('input:text');
jQuery('input:checkbox').each(function(i){
jQuery(this).click(function(){
if(jQuery(this).attr('checked')) {
$(txtObj[i]).val("E");
} else {
$(txtObj[i]).val("H");
}
});
});
});
Today I'm currently using "Checkbox" and just a little problem. I have a dropdown list in my first page, I choose the items "DropDown 1" and then I click the Submit button after that it will go to the next page. So then, the second page will load all items under the "DropDown 1" using a checkbox only.
My problem is:
How can I check them all by using a checkbox "Check All", where the items in "DropwDown 1" are came from my database [MySQL].
Here's my code in page two:
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<?php
$dropdown_value = (string)$_POST["id"];
echo "<br/>";
if ($dropdown_value == 'All Building')
{
$all = mysql_query("SELECT fldBldgName FROM tblbuildings");
while ($row = mysql_fetch_array($all))
{
echo "<tr><td>";
echo "<input type='checkbox' name='play[]' class='chk_boxes1' value='" . $row['fldBldgName'] . "'>";
echo $row['fldBldgName'];
echo "</td></tr><br/>";
}
}
?>
<script>
$(document).ready(function(){
$('input[name="all"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]').attr('checked', status);
});
});
</script>
look checked Attribute
echo "<input type='checkbox' class='chk_boxes1' name='play[]' value='".$row['fldBldgName']. "' checked>";
and why a <br> in a table?
EDIT
try this:
echo '<div><input type="checkbox" class="checkall"> Check all</div>';
$all = mysql_query("SELECT fldBldgName FROM tblbuildings");
while ($row = mysql_fetch_array($all))
{
echo "<div><input type='checkbox' name='play[]' class='chk_boxes1' value='" . $row['fldBldgName']."'>";
echo $row['fldBldgName'];."</div>";
}
and jQuery function:
$(function () {
$('.checkall').on('click', function () {
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});
});
http://jsfiddle.net/H37cb/210/
Try listening to the change event on the .chk_boxes element. You should also use prop instead of attr when working with "binary" properties like `checked':
$('.chk_boxes').on('change', function(){
$('.chk_boxes1').prop('checked', $(this).prop('checked'));
});
http://api.jquery.com/prop/
You also need to wrap all your tr/td elements in a table element.:
<table>
<?php
...
?>
</table>
There's no need for br elements after a tr. tr will always start on a new line.
I made a design with ajax, jquery, mysql and checkbox in php. It is like that :
There is box with checkboxes. And there is another box which is empty. When you checked a checkbox in first box, information about that checkbox will be displayed in empty box. I did it and work good.But when you clicked another checkbox, information about first you clicked dissappear and only current selection is displayed. That is to say, I want to add new selection on old ones. Also how can I delete information in second box when I unchecked a checkbox. Thank you.
Here is HTML code :
<div id="first_box">
<label class='checkbox'>
<input type='checkbox' id=1>
First checkbox
</label>
<label class='checkbox'>
<input type='checkbox' id=2>
Second checkbox
</label>
<label class='checkbox'>
<input type='checkbox' id=3>
Third checkbox
</label>
</div>
<div id="second_box"> </div>
Here is jquery code :
$(document).ready(function() {
$("#first_box input:checkbox").change(function() {
if($(this).is(":checked")) {
$.post("/here/is/url", { strID:$(this).attr("id"), strState:"1" },
function(data) {
$("#second_box").html(data);
});
} else {
$.ajax({
url: 'here/is/url/',
type: 'POST',
data: { strID:$(this).attr("id"), strState:"0" }
});
}
});
});
Here is the php code for ajax request :
$strID = $_POST['strID'];
$strState = $_POST['strState'];
if ($strState) { //if checkbox is clicked
//I fetch data about checkbox which is clicked
$infos = $this->info_model->get_info_from_checkbox_id($strID);
foreach ($infos as $info) {
echo "<label class='checkbox'>
<input type='checkbox'>".$info->information .
"</label>";
}
} else { // if it is unchecked
// I do not know how to delete
}
I want to add new selection on old ones.
you can use append() instead of html() which replaces the content:
$("#second_box").append(data);
how can I delete information in second box when I unchecked a checkbox.
you can use empty() which removes the contents of the selected element:
$("#second_box").empty();
Alternatively, you could do more on the client-side. See here for a demo.
<div id="first_box">
<label class='checkbox'>
<input data-url="url1" data-id="1" type="checkbox"> First checkbox
</label>
<label class='checkbox'>
<input data-url="url2" data-id="2" type="checkbox" > Second checkbox
</label>
<label class='checkbox'>
<input data-url="url3" data-id="3" type="checkbox"> Third checkbox
</label>
</div>
<div id="second_box"></div>
JavaScript:
$(document).ready(function() {
$("#first_box input:checkbox").change(function(e) {
var $this = $(this);
if (already_loaded()) {
update_visibility();
} else {
load();
}
// END -- Functions
function already_loaded() {
return $this.data("loaded");
}
function is_loading() {
return $this.data("loading");
}
function load() {
if (!is_loading()) {
$this.data("loading", true);
var id = $this.data("id");
$.post("url", { // or use $this.data("url") if you want individual URLs
strId: id
}, function(data) {
$this.data("loaded", true);
$this.data("is_loading", false);
$("#second_box").append(data);
update_visibility();
});
}
}
function is_checked() {
return $this.is(":checked");
}
function update_visibility() {
var $info = $("#info-" + $this.data("id"));
if (is_checked()) {
$info.show();
}
else {
$info.hide();
}
}
});
$("#first_box input:checkbox").data("loaded", false);
$("#first_box input:checkbox").data("loading", false);
});
I've created an HTML form that has checkboxes that are checked dynamically due to a variable from a previous page (there is only one checkbox checked each time).
What I'd like is to echo the value of this checkbox out (to make the main title of the page so javascript alert is not adapted).
Example :
<html>
<body>
<h1>Here I'd like to echo the value of the checkbox that is checked<h1>
<form id="myform" name="myform">
<p>
<input type="checkbox" name="car" id="porsche" /> <label for="porsche">porsche</label><br />
<input type="checkbox" name="car" id="ferrari" /> <label for="ferrari">ferrari</label><br />
</p>
<script type="text/javascript">
function loopForm(form,car) {
var cbResults = 'Checkboxes: ';
var radioResults = 'Radio buttons: ';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].id == car) {
form.elements[i].checked = true ;
}
}
}
}
...
// This function will check one of the two checkboxes
loopForm(document.myform,car);
</script>
</body>
</html>
The best I can do, I'm afraid, is the following:
var inputs = document.getElementsByTagName('input');
var checkboxes = [];
for (i=0; i<inputs.length; i++){
if (inputs[i].type == 'checkbox' && inputs[i].getAttribute('checked') == 'checked'){
checkboxes.push(inputs[i].value);
}
}
document.getElementsByTagName('h1')[0].innerHTML = checkboxes;
JS Fiddle demo.
This is slightly clunky, but does, at least, use plain JavaScript; albeit it does seem to require that the checked checkboxes be marked up as following: checked="checked".
You can use jQuery to achieve this. Listen for the change() event on the checkboxes and change the text() of the h1 when this happens.