質問: ### 前提・実現したいこと Python(Django)でタスク管理アプリを作成しています タスクの完了・非完了を分けるためにチェックボックスにチェックを入れるか否かでタスクを分けています ![このような表示](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/1f55cc1c50021365491b50655ecea171.png) 四角の部分にチェックを入れたら、タスクの中のdoneをTrueにして、チェックを解除したらdoneをFalseにして... ということがやりたいことになります ### 発生している問題・エラーメッセージ 現状、html側でJQueryを用いてチェックの処理 Python側でDBの操作といった具合に調整しています ところが、チェックを入れると ``` Failed to load resource: the server responded with a status of 500 (Internal Server Error) ``` となってしまいます ### 該当のソースコード タスクを一覧表示するページになります del-idなどと書かれているのは、選択削除機能を実装しているためです ``` {% extends "base.html" %} {% load staticfiles %} {% block title %}To do list{% endblock %} {% block jumbo_title %}Detail Tasks{% endblock %} {% block nav_index %}active{% endblock %} {% block content %} {% if task_list %} {% for task in task_list %} {% if task.done %} {% else %} {% endif %} {{task.title}} Abstract {{task.text}} {% endfor %} {% else %} No tasks. {% endif %} {% endblock %} ``` ところどころコードとして荒い部分はご容赦下さい Python側では単純にDBの更新を行い、成功すれば200を返すだけなので省略させていただきます ### 試したこと 主に原因として ・JQueryが上手く扱えていない ・この書き方だとcheckboxがそれぞれ同じid,class等を持ってしまうため仮に上手く実装出来ても、1つチェックするだけで全てに変更が行き渡ってしまう恐れがある といったものが考えられるだろうかと思いました ですが、これ以外のタスク一覧の表記の仕方が分かりませんでしたし、何が根本的な原因かということもはっきりとは分からなかったので現状としてはこのままになっています この解決法以外にも、別の形でこのtodoアプリを表現出来るというものがあれば是非よろしくお願いします
回答: .del-idがクリックされたときのイベントの中に ``` $(function() { $(".del-id").on("click", function() { //chk_status = $(".del-id").prop("checked"); chk_status = $(this).prop("checked"); if(chk_status){ //チェックボックスをOFFにする(チェックを外す)。 // $(".del-id").prop("checked", false); $(this).prop('checked', false); }else{ //チェックボックスをONにする(チェックする)。 // $(".del-id").prop("checked", true); $(this).prop('checked', false); } chk_area = $('.del-id').map(function(){ return $(this).val(); }).get(); var chk_url = $(this).attr('chk-url'); chk_area.map(function (c_id){ chk_url = chk_url + c_id.slice(0,2) + ','; }); ``` みたいな感じで、クラスでは要素を2つ指定してしまうのですが、thisを使うことで.del-idのクリックされた1つの要素を指すのでこれでダメでしょうか??