jquery - jQuery - 选中复选框时更改值

Question

我在 HTML 中有三个复选框

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

我想这样做：如果选中了 id A1，则将 span 中的文本更改为 priceUp。如果选中了 ids A1 和 A2，则将 span 中的文本更改为 priceDown。如果选中了 ID A1、A2 和 A3，请将 span 中的文本更改为 priceNormal。

Answer 1

使用 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
  }
});

Answer 2

试试这个

$('#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);
});

检查小提琴

Answer 3

这样您就可以查看您的复选框是否被选中。

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