JS觸發複選框的選中attr不動態變化

Question

我的問題很簡單，我有一個隱藏的複選框和一個自定義假複選框觸發真正的複選框。我已經嘗試了很多種方法，但click函數只在開始時才起作用。

我在stackoverflow上搜索過類似的問題，但是找不到類似於我的問題。感謝您的時間。

Here is jsFiddle.

HTML：

<div class="fl"> 
    <span class="tri_checkbox"></span> 
    <input class="hidden_checkbox" type="checkbox" /> 
</div> 

的jQuery：

$(document).on('click','.tri_checkbox',function() { 
    if (!$(this).hasClass('selected')) { 
    $(this).parent().find('input.hidden_checkbox').attr('checked','checked'); 
    $(this).addClass('selected'); 
    }else{ 
    $(this).parent().find('input.hidden_checkbox').removeAttr('checked'); 
    $(this).removeClass('selected'); 
    } 
}); 

Answer 1

您需要使用.prop()設置檢查屬性

$(document).on('click', '.tri_checkbox', function() { 
    $(this).next().prop('checked', function (_, checked) { 
     return !checked; 
    }); 
    $(this).toggleClass('selected'); 
}); 

演示：Fiddle

1. 可以使用的.next（）在這裏，因爲跨度和輸入是兄弟
2. 使用toggleClass（）來更改類

閱讀：Attributes vs. Properties

Answer 2

縮短您的代碼並試試這個：

$(this).toggleClass("selected"); 
$(this).parent(".fl").find(":checkbox").prop("checked", $(this).hasClass("selected")); 

演示：http://jsfiddle.net/CVWWn/4/

或者只是使用一個大鏈條：

$(this).toggleClass("selected").parent(".fl").find(":checkbox").prop("checked", $(this).hasClass("selected")); 

大連鎖：http://jsfiddle.net/CVWWn/5/

Answer 3

• 不要使用if（hasClass！）{}其他{}，使其在正確的邏輯在 第一位！ :)
• .parent（）。find（）方法=兄弟姐妹（）
• 使用.prop（）

。

$(document).on('click','.tri_checkbox',function() { 
      if ($(this).hasClass('selected')) { 
      $(this).siblings('input.hidden_checkbox').prop('checked', false); 
      $(this).removeClass('selected'); 
      } 
     else { 
      $(this).siblings('input.hidden_checkbox').prop('checked', 'checked'); 
      $(this).addClass('selected'); 
      } 
    }); 

fiddle