jquery - jQuery - チェックボックスがチェックされているときに値を変更する

Question

HTMLに3つのチェックボックスがあります

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

やりたいこと: ID A1 がチェックされている場合、span のテキストを priceUp に変更します。ID A1 と A2 がオンになっている場合は、span のテキストを priceDown に変更します。ID A1、A2、および A3 がオンになっている場合は、スパン内のテキストを 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
    }
});