Question

我是初级Django开发人员。这是我公司的第一个项目，我有一个FrontEnd任务。

对于我来说，前端是不可思议的魔法，但是尽我所能，但是在这里我完全迷失了； /

要执行的任务：

“如果我单击复选框，它将重定向到具有更改的端点的页面复选框的值从打开到关闭”

我写了所有后端人员……甚至是某种前端，但是它不能按我的意愿工作。我已经尝试了很多组合，但我仍然不知道。

复选框代码：

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

这是怎么回事？


当我直接单击复选框时，我会出现一个确认框   单击“确定”，复选框更改状态，但请求未发送...

当我单击外部复选框时，会出现一个确认框，当我单击“确定”时，我将正确重定向到请求站点。

当我直接单击复选框时，如何使其起作用……不仅在外部？ ; /

我试图在div之前，div之后，标签之前，标签内部进行运输...什么都行不通。

我将不胜感激！

Answer 1

这非常简单，并且由于我的编辑与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");
    }

  }
}

编辑：您要根据来自后端的信息更改Checkbox值吗？

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

因此，使用前面的代码，您可以调用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>
                });
        }

      }
    }

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

1 个答案: