Question

我正在尝试获取单击的当前复选框的子输入标记，并通过我的指令向其添加checked。我正确设置了指令，但是当我尝试获取undefined

时，我收到elem[1]

HTML：

<div class="checkbox">
    <input id="checkbox1" type="checkbox" checked ng-model="checkboxoption.value1">
    <span class="custom"></span>
    <label for="checkbox1">Checkbox 1</label>
</div>

JS：

.directive('checkbox', [function() {
    return {
        restrict: 'C',
        scope: {},
        link: function(scope, elem, attr) {
            elem.bind('click', function(evt) {
                var currentCheckbox = elem[1];
                console.log(elem[1]);
                elem.prop('checked');
            });
        }
    };
}])

Answer 1

elem是jQuery或jqLite对象。下标允许您索引由选择器匹配的元素集合。例如，在jQuery中，

$("span")[1]

获取页面上的第二个span。另一方面，

$("body")[1]

应该返回undefined，因为只应该有一个主体。

<div class="checkbox">中只有一个元素（elem）。为了得到第二个孩子，你可以这样做：

elem.children()[1]

但是你可能想要它的第一个孩子，因为复选框首先出现在HTML中：

elem.children()[0]

另一种方法是：

elem.find("input")[0]

这可能会更好，因为如果您更改HTML中元素的顺序，它就不会中断。

这两个都将为您提供一个普通的DOM对象。获得checkbox元素后，您可以设置其checked属性，如下所示：

elem.children()[0].checked = true;
// or
elem.find("input")[0].checked = true;

顺便说一下，您应该从复选框中删除id元素，因为如果您多次使用此指令，则ID将被复制。

Answer 2

你可以使用Angular#angular.element;

这样做

您可以使用事件

的jQuery#target属性获取当前已检查的元素

 link: function(scope, elem, attr) {
            elem.bind('click', function(evt) {
            angular.element(evt.target).attr('checked',true);
       });
 }

这是工作Plunker

Answer 3

您正在尝试访问elem [1]中不存在的elem [1]。

而不是使用elem[1]使用elem[0]

获取单击当前复选框的子输入标记

3 个答案: