user3906610 user3906610 - 4 years ago 162
Javascript Question

checkbox instead of button

First of all, I'm a bit new at this (but I'm learning fast). I wanted to change a 'done-button' I have in my code (below) to a checkbox. Now I have one button for marking done, another one for marking undone and another one for deleting. For the first 2 I wanted a checkbox (so both for marking done as undone). Tried a few things (in code you see jquery code I got from this page to get the id of the checkbox), problem with this code is that I only get the id of the first checkbox/item in the database, not for the 2nd, 3rd,...
If you can give me the solution for getting the id, I'd be happy.
If you can give me the solution for changing the done button (with rerouting to the mark.php website) I would be crazy happy.
If you can give me both solutions, I would be in you're dept and you'll get a thumbs up from me :-)

<script>
$(document).ready(function() {
$('#id').on('change', function(event) {
var checkbox = $(event.target);
var isChecked = $(checkbox).is(':checked');
alert('checkbox ' + checkbox.attr('value') + ' is checked: ' + isChecked);
});
});
</script>

<?php
$userId = session::get(config::get('session/session_name'));
$items = DB::getInstance()->get('items', array('user', '=', $userId));

?>

<div class="list">
<h1 class="header">My Page</h1>

<?php if($items->count()): ?>
<ul class="items">
<?php foreach($items->results() as $item): ?>
<li>
<input type="checkbox" id="id" value="<?php echo $item->id; ?>" <?php echo $item->done ? ' checked' : '' ?> />
<span class="item<?php echo $item->done ? ' done' : '' ?>"><?php echo $item->name; ?></span>
<?php if(!$item->done): ?>
<a href="mark.php?as=done&item=<?php echo $item->id; ?>" class="done-button">Gedaan</a>
<?php endif; ?>
<?php if($item->done): ?>
<a href="mark.php?as=notdone&item=<?php echo $item->id; ?>" class="done-button">Niet gedaan</a>
<?php endif; ?>
<?php if($item->done): ?>
<a href="mark.php?as=delete&item=<?php echo $item->id; ?>" class="done-button">Verwijderen</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<p>Je hebt nog niets toegevoegd</p>
<?php endif;?>

<form class="item-add" action="add.php" method="post">
<input type="text" name="name" placeholder="Hier iets typen" class="input" autocomplete="off" required>
<input type="submit" class="submit" value="Toevoegen">
</form>

Answer Source

your question is : why I just can handle first #id, isn't?

try this:

option 1:

$('body').on('change','#id', function(e) {
    if($(this).is(':checked')) {
        alert('checkbox with value ' + $(this).val() + ' is checked');
    } else {
        alert('checkbox with value ' + $(this).val() + ' is unchecked');
    }
});

DEMO : http://jsbin.com/vumokab

option 2:

$('input[id="id"]').change( function(e) {
    if($(this).is(':checked')) {
        alert('checkbox with value ' + $(this).val() + ' is checked');
    } else {
        alert('checkbox with value ' + $(this).val() + ' is unchecked');
    }
});

DEMO : http://jsbin.com/cozano

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download