Question

这应该非常简单，但我无法让它工作，而且我是Javascript的绝对初学者。我看了这里的各种线索。我正在使用django模板，在一个简单的链接上。我想添加一个onclick确认消息，例如'Trash（14）Projects？你确定吗？'其中14是准备在表单中提交的复选框的数量。现在我有。

<button type="submit" class="actionbutton" name="delete" onclick="return confirm('Add projects to trash - Are you sure?')" >Remove / Add To Trash</button>

当然没有要删除的项目数量。我可以在头部添加一个脚本来计算复选框的类，但我想知道如何在确认对话框中执行javascript？比如...

<button type="submit" class="actionbutton" name="delete" onclick="return confirm('Add ($(":checkbox:checked").length) to trash - Are you sure?')" >Remove / Add To Trash</button>

哪个不起作用，可能是因为“：checkbox：checked”在onclick“”中被转义。

任何人都指出我正确的方向是什么是做这种事情的“通常”方式......

Answer 1

明智地使用引号并使用+创建有效字符串

<button type="submit" class="actionbutton" name="delete" onclick="return confirm('Add (' + $(':checkbox:checked').length + ') to trash - Are you sure?')" >Remove / Add To Trash</button>

我建议使用不显眼的事件处理程序。添加唯一标识符，我已将submitbutton添加为CSS类

<button type="submit" class="actionbutton submitbutton" name="delete" >Remove / Add To Trash</button>

使用Native Vanilla JS绑定事件

document.querySelector('.submitbutton').addEventListener("click", function (event) {
    var msg = 'Add (' + document.querySelectorAll('[type=checkbox]:checked').length + ') to trash - Are you sure?';
    if (!confirm(msg)) {
        event.preventDefault();
    }
});

的jQuery

$('.submitbutton').on('click', function(){
    return confirm('Add (' + $(':checkbox:checked').length + ') to trash - Are you sure?')
});

Onclick确认添加复选框长度

1 个答案: