checkbox instead of button

Question

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>

<a href="mark.php?as=done&item=<?php echo $item->id; ?>" class="done-button">Gedaan</a>: Gedaan is done :) — user3906610
– user3906610, Commented Feb 6, 2017 at 10:24

Manoj Sharma · Accepted Answer · 2017-02-06 10:20:13Z

1

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

edited Feb 6, 2017 at 10:20

Manoj Sharma

1,4552 gold badges13 silver badges20 bronze badges

answered Feb 5, 2017 at 19:16

plonknimbuzz

2,6742 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

checkbox instead of button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related