jQuery的 - 当复选框被选中更改值

Question

我在HTML

<input type="checkbox" id="a1"/> 
<input type="checkbox" id="a2" /> 
<input type="checkbox" id="a3" /> 
<span class="price"></span> 

三个复选框我想这样做： 如果ID A1被选中，改变文本的跨度priceUp。 如果选中ids A1和A2，则将范围内的文本更改为priceDown。 如果选中ids A1，A2和A3，则将范围内的文本更改为priceNormal。

Answer 1

试试这个

$('#a1 ,#a2 , #a3').on('click' , function(){ 
    var $a1Check = $('#a1').is(':checked'); 
    var $a2Check = $('#a2').is(':checked'); 
    var $a3Check = $('#a3').is(':checked'); 
    var text = '' ; 
    if($a1Check && $a2Check && $a3Check){ 
     text = 'priceNormal'; 
    } 
    else if($a1Check && $a2Check){ 
      text = 'priceDown'; 
    }  
    else if($a1Check) { 
     text = 'priceUp'; 
    }   

    $('.price').html(text); 
}); 

Check Fiddle

Answer 2

这样你可以看到你的复选框是否被选中。

$('#a1').click (function() 
{ 
    var thisCheck = $(this); 
    if (thischeck.is (':checked')) 
    { 
     // Do stuff 
    } 
}); 

Answer 3

使用jQuery你可以为你想要观看的元素 “变” 听。

这看起来是这样的（例如，仅用于ID为 “A1”）：

$("#a1").change(function() { 
    if ($(this).is(":checked")) { 
    // do something if a1 is checked 
    } else if ($(this).not(":checked")) { 
    // do something if a1 is unchecked 
    } 
});