使用jquery檢查並取消選中複選框

Question

我想創建一個函數來檢查和取消選中複選框，當我們點擊上一個span元素時，它有一次工作，但它不再工作......我不想「不懂......

我的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在內部使用以查看複選框是否已選中，因此下次嘗試更改時，att ribute說它已被選中，並且複選框似乎已被選中，但jQuery認爲它沒有被檢查，因爲它沒有被設置爲attr()。

FIDDLE

Answer 2

在這裏，你可以使用一個標籤，一個標籤包裝你的投入。你不一定需要爲此使用Javascript。

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

或者您可以使用label for如果您有與它關聯的複選框。

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

Demo

HTML元素表示用於在用戶界面中的項目的標題。它可以通過使用for屬性與控件相關聯，也可以將控件元素放置在標籤元素中。這種控制稱爲標籤元素的標籤控制。