Javascript 如何使复选框成为带有确认消息的按钮？

我是Junior Django dev。这是我在公司的第一个项目，我有一个前端任务

前端对我来说是黑魔法，但我尽力了，但在这里我完全迷路了/

要执行的任务：

<table>
    <thead>...</thead>
    <tbody>
        <td>
            <a href="{% url 'product_user_paid_change' tp_id=item.pk paid=item.paid %}" onclick="return confirm('For surechange - {{ item.full_name }}?')">
                <div class="checkbox m-15">
                    <label for="id_paid"><input type="checkbox"{% if item.paid == True %} checked{% endif %} ><i class="input-helper"></i></label>
                </div>
            </a>
        </td>
    </tbody>
</table>

“如果我单击复选框，它将重定向到端点发生变化的页面 复选框的值从“开”到“关”

我写了所有后台人员。。。甚至是某种前端，但它不是我想要的那样工作。我试过很多组合，但我还是不知道

复选框的代码：

<table>
    <thead>...</thead>
    <tbody>
        <td>
            <a href="{% url 'product_user_paid_change' tp_id=item.pk paid=item.paid %}" onclick="return confirm('For surechange - {{ item.full_name }}?')">
                <div class="checkbox m-15">
                    <label for="id_paid"><input type="checkbox"{% if item.paid == True %} checked{% endif %} ><i class="input-helper"></i></label>
                </div>
            </a>
        </td>
    </tbody>
</table>

...

这里发生了什么事？

当我直接点击复选框时，当我 单击“确定”，复选框更改状态，但请求未发送

当我点击外部复选框时，有confirmbox，当我点击“确定”时，我被正确地重定向到请求站点

如何使它工作时，我直接点击复选框。。。不仅在外面/

我试着在div之前，div之后，标签之前，标签内部传输这个。。。什么都不管用

---

我将感谢任何帮助

这很简单，而且我的编辑与python或django没有任何关系

您必须做的是在模板上创建一个输入复选框

<input type="checkbox" id="my_awesome_checkbox">

创建一个javascript函数或将代码绑定到该输入中的事件

<input type="checkbox" id="my_awesome_checkbox" onchange="myCuteFunction">

function myCuteFunction() {    
  var checkBox = document.getElementById("my_awesome_checkbox")

  if (checkBox.checked == true){
    let result = confirm("Hey! You really want to leave me here?");
    if (result){
        location.replace("the url you wan to go");
    }

  }
}

函数myCuteFunction（）{
var checkBox=document.getElementById（“my\u awesome\u checkBox”）
如果（checkBox.checked==true）{
让结果=确认（“嘿！你真的想把我留在这里吗？”）；
如果（结果）{
替换（“你想要去的url”）；
}
}
}

编辑：是否要根据来自后端的信息更改复选框值

如果是这样，您可以使用ajax从端点获取所需的响应，并更改复选框

function myCuteFunction() {    
      var checkBox = document.getElementById("my_awesome_checkbox")

      if (checkBox.checked == true){
        let result = confirm("Hey! You really want to leave me here?");
        if (result){
            $.ajax({
                url: "<your endpoint>",
                  context: <necessary paramenters>
                }).done(function() {
                  <your response to add your logic to change the checkbox>
                });
        }

      }
    }

因此，使用前面的代码，您可以调用ajax来访问后端，而不是更改页面或url。。。然后更改复选框的值

function myCuteFunction() {    
      var checkBox = document.getElementById("my_awesome_checkbox")

      if (checkBox.checked == true){
        let result = confirm("Hey! You really want to leave me here?");
        if (result){
            $.ajax({
                url: "<your endpoint>",
                  context: <necessary paramenters>
                }).done(function() {
                  <your response to add your logic to change the checkbox>
                });
        }

      }
    }

函数myCuteFunction（）{
var checkBox=document.getElementById（“my\u awesome\u checkBox”）
如果（checkBox.checked==true）{
让结果=确认（“嘿！你真的想把我留在这里吗？”）；
如果（结果）{
$.ajax({
url:“”，
背景：
}).done（函数（）{
});
}
}
}

我应该提一下。。。我正在{%for…%}中创建行，因此这些行是自动生成的。对于第一行和第一个复选框“../product/1/1/”，对于第二行“../product/1/2/”，对于第三行“../product/1/3/”，等等。因此复选框名称是共享的。。。。每一行只会改变。我想我提供了足够的信息。。。看来我错了/也许是这样的？在复选框“onclick”中，我通过函数传递必要的变量？然后myCuteFunction自动生成url？但是内部功能呢？或者我应该传递完整的url？取决于。。。您需要更改Django中某人的复选框吗？或者你只需要在前端使用一些基于逻辑的url？