ボタンの代わりにチェックボックス

Question

まず、私はこれで少し新しいですが（私は速く学んでいます）。私は自分のコード（下）にある「完了ボタン」をチェックボックスに変更したいと思っていました。今私はマーキングのための1つのボタンを、別の1つのマークをアンドゥと削除するためのものがあります。最初の2つはチェックボックスが必要でした（両方ともマークされたものは元に戻す）。いくつかのことを試してみました（コードでは、このページからチェックボックスのIDを取得するjqueryコードを参照してください）。このコードの問題は、データベースの最初のチェックボックス/項目のIDのみを取得することです。 、3rd、... IDを取得するためのソリューションを私に与えることができれば、私は満足しています。 完了ボタンを変更するための解決策を私に与えることができれば（私はmark.phpウェブサイトへの経路変更を伴います）、私は幸せになるでしょう。 あなたは私の両方のソリューションを与えることができる場合、私はあなたにあるであろうがDEPTだと、あなたは、あなたの質問がある

<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 1

:-)まで私から親指を取得します：なぜ私は、最初の#IDを扱うことができますそうじゃない？

これを試してみてください。

オプション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

オプション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