Question

我想创建一个函数来检查和取消选中复选框，当我们点击上一个span元素时，它会工作一次，但它不能再次工作......我不明白...... < / p>

我的HTML代码：

<form class="form" action="#" method="post">
  <label>Input radio</label>
  <span>Text</span><input type="checkbox">
  <span>Text</span><input type="checkbox">
  <span>Text</span><input type="checkbox">
  <label>Input checkbox</label>
  <span>Text</span><input type="radio" name="radio">
  <span>Text</span><input type="radio" name="radio">
</form>

我的js代码：

$('form.form').find('span').on('click', function(){
    $this = $(this);
    if( $(this).next().attr('type') == 'checkbox' ){ 
        if( $this.next().is(':checked') ){
            $this.next().attr('checked', false);
        }else{
            $this.next().attr('checked', true);
        }
    }else{
        $this.next().attr('checked', true);
    }
});

更新1

网址：http://jsfiddle.net/tonymx227/bvPsq/

安东尼

Answer 1

您必须使用 prop()

$this.next().prop('checked', false);

它第一次工作的原因是因为jQuery更改了属性，并且复选框已更新，但元素的checked属性未更新，并且jQuery在内部使用它来查看复选框检查，所以下次你尝试更改它时，属性说它已经检查，并且复选框似乎被检查，但jQuery认为它没有被检查，因为这是属性所说的，因为它没有设置attr()。

FIDDLE

Answer 2

这是您可以使用标签，用标签包装输入的地方。您不一定需要使用Javascript。

<label>Text<input type="checkbox" /></label>

或者，如果您有与其关联的ID的复选框，则可以使用label for。

<label for="chk1">Text</label> <input type="checkbox" id="chk1" />

<强> Demo

HTML元素表示用户界面中项目的标题。它可以通过使用for属性或通过将控制元素放在label元素中来与控件相关联。这种控制称为标签元素的标记控制。

使用jquery选中并取消选中一个复选框

2 个答案: