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

可能是$与您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);
});

在“jQuery.noConflict（）;”之后你可以使用“jQuery”而不是“$”

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

Answer 2

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

Answer 3

@Arne

我尝试快速运行你的代码，但由于某种原因它只是每次都取消它。我快速修改它以便每次检查复选框..据我所知它没有必要取消选中该框，对吧？

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

@Doug：感谢提示

Answer 4

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

$('#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 5

我最终使用了一个隐藏的输入，这是一个显而易见的解决方案，也是我之前实现过的一个，但这次忽略了一些。但我感谢所有各种有益的回应。 Stack Overflow rocks。

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

5 个答案: