Jquery/HTML：检查输入类型图像是否被点击答案

【问题标题】：Jquery/HTML: Check if input type image is clickedJquery/HTML：检查输入类型图像是否被点击
【发布时间】：2021-08-18 16:18:51
【问题描述】：

我有一个由 <input type="image"> 标签组成的 div。我有一个按钮，单击该按钮应验证是否选择了至少一个图像输入。我尝试了以下不起作用

$("#step_two_show").click(function() {
        var img_selected = $('input[type="image"]:selected').length;
        if (img_selected > 0) {
            $("#step_one").hide();
            $("#step_two").show();
        } else {
            $("#pentype_error").show();
        }
    });

还有一个问题是，当我单击“step_two_show”按钮时，被选中的输入图像变为未选中（我认为这是造成问题的原因）

【问题讨论】：

input type="image" 提交表单。
任何其他有效的方式来添加图像作为输入？我应该将它们包装在一个 div 中并使用自定义 jQuery 代码处理验证吗？
按钮可以吗？

标签： javascript jquery validation input

【解决方案1】：

不使用输入类型作为图像，而是使用 img 标签。然后在单击事件处理程序上使用 jQuery，添加了一个 css 类selected。在验证期间，检查selected 是否存在

$(".pen-type").click(function() {
        image_selected = true;
        $(this).css('border', "solid 2px gold");
        $(this).addClass('selected');
        $('.pen-type.selected').not(this).css('border', 'none');
        $('.pen-type.selected').not(this).removeClass('selected');
    });

$("#step_two_show").click(function() {
        
        if ($('.pen-type.selected').length > 0) {
            $("#step_one").hide();
            $("#step_two").show();
        } else {
            $("#pentype_error").show();
        }
    });

【讨论】：