使用jQuery切換復選框CSS樣式

Question

我創建了一個由復選框控制的過濾器，並使用jQuery，我已經1）刪除了原始復選框... $（'。toggle_bdrms input：checkbox'）。css（'display'，'none'）; ..並使用CSS賦予復選框標簽方形按鈕的外觀。

現在，我想使用jQuery切換復選框樣式，以使用background-color填充框：白色。 我已經成功地使用jQuery來更改標簽背景，但是toggle（）函數沒有實現我想要的功能，即單擊標簽時將背景顏色從無切換為白色，然后又切換為白色。

在此先感謝您的指導/協助。

https://jsfiddle.net/baskinco/e7utzowb/3/

 $('.toggle_bdrms input').toggle(function() { $('.toggle_bdrms input:checkbox').css('display', 'none'); $('.toggle_bdrms label').css({'background-color':'#FFFFFF', 'color':'#00a9b7'}); }); 

 .toggle_bdrms > * { float: left; } .toggle_bdrms input[type=checkbox]{ display: none; } .toggle_bdrms label{ display: block; text-align: center; letter-spacing: .15em; border: 1px solid $white; background-color: none; width: 170px; padding: 5px 8px; margin: 5px 0; color: $white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <form name="filter" method="post" action="" id="slidefilter"> <div class="toggle_bdrms"> <input id="onebdrm" type="checkbox" value="onebdrm"> <input id="twobdrm" type="checkbox" value="twobdrm"> <label for="onebdrm">ONE BEDROOM</label> <label for="twobdrm">TWO BEDROOM</label> </div> </form> </div> 

Answer 1

像這樣：

$('#onebdrm, #twobdrm').toggle(function() {
    var $this = $(this);
    var checked = $this.prop('checked');

    $this.prop('checked', !checked);
    return false;
});