Question

我有以下查询代码：

function selectTag(id) {
    var input = 'input#tag_' + id;
    var span = '#span_' + id;

    if ($(input).is(':checked') && $(span).hasClass('selected')) {
        $(span).removeClass('selected');
        $(input).prop('checked', false);
    }
    else {
        $(span).addClass('selected');
        $(input).prop('checked', true);
    }
}

并且条件的最后一部分没有执行。未选中或取消选中复选框。

这是html。

<?php foreach ($this->tags as $uri=>$tag){?>
     <input type="checkbox" name="tags[]" style="display: none;" value="<?php echo $uri;?>" id="tag_<?php echo $uri;?>" <?php echo isset($args['tags']) && in_array($uri, $args['tags'])?'checked="checked"':'';?> />
     <span onclick="selectTag(<?php echo $uri;?>)" id="span_<?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 }?>

Answer 1

你可以这样做： Live Demo

使用jQuery时无需使用onClick属性。您可以通过click事件来完成此操作。所以不需要将元素id传递给函数。 $(this)包含元素对象，您可以通过attr('id')访问id属性。

<强>的jQuery

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

<强> HTML

<input type="checkbox" name="tags[]"  value="" id="tag_1" />
<span id="1" for="" class="tag selected">siamak 1</span>

<input type="checkbox" name="tags[]" value="" id="tag_2" />
<span id="2" for="" class="tag selected">siamak 12</span>


<input type="checkbox" name="tags[]" value="" id="tag_3" />
<span id="3" for="" class="tag selected">siamak 3</span>

另外，您可以通过其他方式完成此操作而无需使用ID属性： Live Demo

<强>的jQuery

$('span').click(function(){
    var span = $(this);
    var input = $(this).prev();
    if (input.is(':checked') && span.hasClass('selected')) {
        span.removeClass('selected');
        input.prop('checked', false);
    } else {
       span.addClass('selected');
        input.prop('checked', true);
    } 
});

<强> HTML

<input type="checkbox" name="tags[]"  value=""  />
<span  for="" class="tag selected">siamak 1</span>

<input type="checkbox" name="tags[]" value="" />
<span  for="" class="tag selected">siamak 2</span>


<input type="checkbox" name="tags[]" value="" />
<span  for="" class="tag selected">siamak 3</span>

为什么不选中和取消选中复选框？

1 个答案: