javascript - 为什么第三次点击后我的功能不起作用？

Question

我有以下 html 代码:

<?php foreach ($this->tags as $uri=>$tag){?>
    <input type="checkbox" name="tags[]" style="display: none;" value="<?php echo $uri;?>" id="create_<?php echo $uri;?>" <?php echo isset($args['tags']) && in_array($uri, $args['tags'])?'checked="checked"':'';?> />
    <span onclick="selectTag(this.id)" id="create_<?php echo $uri;?>" for="create_<?php echo $uri;?>" class="tag <?php echo isset($args['tags']) && in_array($uri, $args['tags'])?'selected':'';?>"><?php echo str_replace(' ', '&nbsp;', $tag);?></span>
<?php }?>

这是我的 JS 代码:

function selectTag(id) {
    var input = '.tags input#'+id;
    var span = '.tags span#'+id;
    if ($(input).is(':checked') && $(span).hasClass('selected')) {
        $(span).removeClass('selected');
        $(input).attr('checked', false);
    }
    else {
        $(span).addClass('selected');
        $(input).attr('checked', true);
    }
}

当我单击跨度框时，选择该框，当我再次单击它时，它会取消选择它。问题是，第三次之后，它就停止工作了。

我的代码有什么问题，无法正常工作？

Answer 1

JQuery 现在有一个 prop 方法，它是比使用 attr 方法更好的替代方法。

尝试将 attr("checked", true); 调用替换为对 prop("checked", true);

的调用

请参阅此处有关 Prop 的文档:http://api.jquery.com/prop/

这里是两人的讨论:.prop() vs .attr()

编辑:

此外，正如 Ed Cottrell 所说，您需要为页面上的所有元素拥有唯一的 id 属性。

编辑2:

我创建了一个演示此用法的 fiddle :http://jsfiddle.net/xDaevax/E39hc/