Question

我有这个HTML代码：

<a onclick='addSelector(this)'>
    <img src='resources/img/produkti/test.jpg'>
    <input type='checkbox' value='test.jpg' name='main_image'>
</a>

这是我的javascript：

function addSelector(elem) {
   var a = document.getElementsByTagName('a')
   for (i = 0; i < a.length; i++) {
       a[i].classList.remove('selected')
   }
   elem.classList.add('selected');
   elem.find( 'input[type=checkbox]').prop('checked', true);
   }

因此，当点击“a”时，它会被“选中”。我想这样做，所以孩子的输入也被“检查”了。有什么方法可以解决这个问题吗？

Answer 1

epascarello的评论是正确的，但最终你的问题是elem不是jQuery对象。在最后一行（或者在应用jQuery函数的任何地方）使用$(elem)可能会取得更好的成功。

编写整个内容的一个更好的方法是在元素上有一个点击监听器，而不是这样：

// Listen for an anchor being clicked
$('a').on('click', function(event) {

    // Remove selected class from all anchors
    $('a').removeClass('selected');

    // Add selected class to this element
    $(this).addClass('selected');

    // Make the relevant checkbox ticked
    $(this).find('input[type="checkbox"]').prop('checked', true);

});

虽然如其他地方所述，标签比锚更好:)。

Answer 2

用[{1}}替换锚点（无论如何都不用作锚点）。

默认情况下，这将具有您想要的行为。它还会将图像的alt文本（您应该添加）与屏幕阅读器的输入相关联。

当选择父“a”时，添加“选中”以输入javascript

2 个答案: