Jquery如果複選框被選中添加一個類

Question

我想在複選框被選中時添加一個類。

我的jQuery：

$('input').attr("checked").change(function(){ 
$('div.menuitem').addClass("menuitemshow"); 
}) 

Answer 1

你不應該使用$("input")選擇checkbox，輸入將選擇所有輸入。相反，你可以使用：

$('input:checkbox').change(function(){ 
    if($(this).is(":checked")) { 
     $('div.menuitem').addClass("menuitemshow"); 
    } else { 
     $('div.menuitem').removeClass("menuitemshow"); 
    } 
}); 

基本上，這樣做是執行什麼是function(){}內部時，該複選框被改變。然後，你可以使用jQuery is檢查，如果複選框被選中或不..

Answer 2

試試這個：

$('input').change(function(){ 
    if ($(this).is(':checked')) { 
     $('div.menuitem').addClass("menuitemshow"); 
    } 
}); 

你不能有一個屬性更改事件，而選中的複選框本身的變化情況和運行情況，看是否它已被檢查。

Answer 3

我正在做出你想要用複選框切換類的假設。

$('input').change(function(){ 
    var $this = $(this), $div = $('div.menuitem'); 
    if($this.is(':checked')) 
    { 
    $div.addClass('show'); 
    } 
    else 
    { 
    $div.removeClass('show'); 
    } 
}).change(); 

我已經更新這是一個建議解決方案@Rails初學者的問題給出到目前爲止我讀過的評論。

注意最後一行加上change()。這是強制change在頁面加載時立即執行（我假設$('input')等待document.ready或後 創建）。

Answer 4

$('input:checkbox').change(function() { 
    if (this.checked) { 
     $('div.menuitem').addClass("menuitemshow"); 
    } 
}); 

Answer 5

// if checkbox checked then backgorund color will be gray 
// there should be a input type check box with a parent class label. 

$('input:checkbox').change(function(){ 
    if($(this).is(':checked')) 
     $(this).parent().addClass('selected'); 
    else 
     $(this).parent().removeClass('selected') 
}); 

// input check box should be like this 
<label class="" ><input type="checkbox" name="blabla" /></label> 

這將增加了「選擇」類到標籤標記（）

//css 
.selected { 
background:gray 
} 

Answer 6

$('.vfb-checkbox input:checkbox').change(function(){ 
 
    if($(this).is(":checked")) { 
 
     $('.vfb-checkbox label').addClass("checked"); 
 
    } else { 
 
     $('.vfb-checkbox label').removeClass("checked"); 
 
    } 
 
});

.vfb-checkbox{ 
 
    width:180px; 
 
    height:130px; 
 
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg'); 
 
} 
 
/* checkboxes */ 
 

 
.vfb-checkbox label { 
 
\t \t cursor: pointer; 
 
\t  display: block; 
 
\t  position: relative; 
 
    width:100%; 
 
    height:100%; 
 

 
\t } 
 

 
.vfb-checkbox label:hover{ 
 
    background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat; 
 
} 
 

 
\t 
 
.vfb-checkbox input[type=checkbox] { 
 
    \t display: none; 
 
\t } 
 
\t 
 
.checked{ 
 
    \t  background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vfb-checkbox"> 
 
    <label id="checkbox" for="check1"> 
 
    <input id="check1" type="checkbox" name="check" value="check1"> 
 
    </label> 
 
</div> 
 
<div class="vfb-checkbox"> 
 
    <label id="checkbox" for="check1"> 
 
    <input id="check1" type="checkbox" name="check" value="check1"> 
 
    </label> 
 
</div>

我在複選框中使用了jquery。當我點擊一個元素時，其他元素會受到影響。我該如何解決這個問題？