jQuery：单击上传字段时选择复选框

Question

我正在开发 CMS。当用户想要替换现有缩略图时，他们可以上传替换图像，并选中复选框以证明他们确实正在替换图像。该复选框似乎是必要的，因为否则表单会提交一个空白值（由于上传字段的空白默认值，这是所有浏览器的安全默认值）并擦除现有图像而不指定替换图像。

问题是我总是忘记手动激活该复选框并且上传的图像实际上并没有替换现有的图像，因为如果没有选中该复选框，接收 PHP 文件就不会（按照设计）处理上传的图像文件名。我怀疑用户也会遇到同样的问题，我希望通过减少所需的步骤数来防止这种情况发生。一种解决方案是每当单击上传字段时使用 jQuery 选中复选框。那么为什么这不起作用：

$('#image_req').click(function () {
    if ($('#checkbox_req').attr('checked',true)) {
        $('#checkbox_req').removeAttr('checked');
        alert('Unchecked');
    } else if ($('#checkbox_req').attr('checked',false)) {
        $('#checkbox_req').attr('checked','checked');
        alert('Checked');
    }
});

有问题的 HTML 看起来像这样：

<input id="image_req" name="local_filename" type="file" />
<input id="checkbox_req" name="replace_image" value="yes" type="checkbox" />

Answer 1

不能在隐藏输入中包含默认值 (type="hidden") 吗？这样，当您提交表单时，您就知道默认值是什么。如果没有任何变化，则使用默认值或不执行任何操作，如果上传了文件（检查 $_FILES），则使用新文件。

Answer 2

您的 if 条件无法正常工作，因为您实际上是在分配值而不是获取它们。
试试这个：

$('#image_req').click(function () {
    var checkbox = $('#checkbox_req');
    if (checkbox.is(':checked')) {
        checkbox.removeAttr('checked');
        alert('Unchecked');
    } else {
        checkbox.attr('checked', 'checked');
        alert('Checked');
    }
});

但这有意义吗？当用户第一次手动选中该框然后点击上传时，它会再次取消选中。

默认情况下，我会通过在 HTML 中设置 checked 属性来检查它。如果用户不想替换图像，他可以手动取消选中它。

PS：如果您确实需要始终选中此复选框，那么只需将复选框变成隐藏字段怎么样？

<input id="checkbox_req" name="replace_image" value="yes" type="hidden" />

如果由于任何原因这是不可能的，这里有另一个具有相同效果的想法：使用 javascript 选中该框并通过 CSS 隐藏它。

Answer 3

我最终使用了隐藏输入，这是显而易见的解决方案，也是我之前实现过的解决方案，但这次不知何故忽略了。但我很欣赏所有不同且有益的回应。 Stack Overflow 岩石。

Answer 4

@Arne

我尝试快速运行你的代码，但由于某种原因它每次都会取消选中它..我很快修改了它，以便它每次都检查复选框..据我了解，不需要取消选中该框，对吧？

$('#image_req').mouseup(function () {
    if ($('#checkbox_req').attr('checked',false)) {
        $("input[name='replace_image']").attr('checked', true);
    }
});

@Doug：谢谢你的提示

Answer 5

可能是 $ 与 CMS 中现有的 javascript 库冲突。我必须对选择框做类似的事情，并发现了 jQuery.noConflict:

jQuery.noConflict();

jQuery(document).ready(function() {
    //preselect sectionid
    jQuery('select[name="sectionid"] option[value="29"]').attr("selected", true);
    jQuery('select[name="sectionid"] option[value="29"]').trigger("change");
    jQuery('select[name="access"] option[value="1"]').attr("selected", true);
});

after "jQuery.noConflict();"您可以使用“jQuery”而不是“$”，

在我的情况下，我必须触发更改事件，因为“access”选择框的内容取决于“sectionid”选择框中选择的内容