JS：グループ内の1つのチェックボックスをチェックすると、変数に+1を追加します（ツールチップを表示）

Question

私はラジオボタン、チェックボックス、テキストフィールドを持つフォームを持っています。 たとえば、 グループ1にはラジオボタンが含まれています。

<ul class="radios"> 
    <li><input id="const-style" class="radio-form" type="radio" name="material" value="w1" /><span>test</span></li> 
    <li><input id="const-style" class="radio-form" type="radio" name="material" value="w2" /><span>test2</span></li> 
    <li><input id="const-style" class="radio-form" type="radio" name="material" value="w3" /><span>test3</span></li> 
    ...  
</ul> 

グループ2にはチェックボックスが含まれています。

<ul class="checks">            
    <li><input id="const-style1" class="checkbox-form" type="checkbox" name="style[]" value="ch1" />ch1</li> 
    <li><input id="const-style2" class="checkbox-form" type="checkbox" name="style[]" value="ch2" />ch2</li> 
    <li><input id="const-style3" class="checkbox-form" type="checkbox" name="style[]" value="ch3" />ch3</li> 
    ...  
</ul> 

グループ3（テキストフィールド（名前、姓、メール））。

<ul class="form-info"> 
    <li><input id="name" class="text inline" type="Name" name="name" size="25" placeholder="Name" maxlength="30" autocomplete="off"/></li> 
    <li><input id="SurName" class="text inline" type="SurName" name="surname" size="25" placeholder="Surname" maxlength="30" autocomplete="off"/></li> 
    <li><input id="email" class="text inline" type="Email" name="email" size="25" placeholder="Email" maxlength="30" autocomplete="off"/></li> 
</ul> 

ユーザクリック少なくとも1つのチェックボックスまたはラジオボタンまたはテキストフィールドを感じ、スクリプト変数に+1を加算する（1点最大孔群に）、その後それはこれでツールチップを表示しなければなりませんカウンター（どこでも）。選択を解除すると（チェックボックスやテキストフィールドやラジオボタンがチェックされていないグループが選択されている場合）、1ポイントをサブタスクする必要があります。

JSまたはJqueryでそれを行う方法は？

Answer 1

フィドルhttps://jsbin.com/waluyicapa/edit?html,js,console,outputを参照してください。

HTML

<ul class="radios form-group" is-filled="false"> 
    <li><input id="const-style" class="radio-form" type="radio" name="material" value="w1" /><span>test</span></li> 
    <li><input id="const-style" class="radio-form" type="radio" name="material" value="w2" /><span>test2</span></li> 
    <li><input id="const-style" class="radio-form" type="radio" name="material" value="w3" /><span>test3</span></li> 
    ...  
</ul> 

<ul class="checks form-group" is-filled="false" >            
    <li><input id="const-style1" class="checkbox-form" type="checkbox" name="style[]" value="ch1" />ch1</li> 
    <li><input id="const-style2" class="checkbox-form" type="checkbox" name="style[]" value="ch2" />ch2</li> 
    <li><input id="const-style3" class="checkbox-form" type="checkbox" name="style[]" value="ch3" />ch3</li> 
    ...  
</ul> 

    <ul class="form-info form-group" is-filled="false"> 
    <li><input id="name" class="text inline" type="Name" name="name" size="25" placeholder="Name" maxlength="30" autocomplete="off"/></li> 
    <li><input id="SurName" class="text inline" type="SurName" name="surname" size="25" placeholder="Surname" maxlength="30" autocomplete="off"/></li> 
    <li><input id="email" class="text inline" type="Email" name="email" size="25" placeholder="Email" maxlength="30" autocomplete="off"/></li> 
</ul> 

    <p id ="count"> 
    </p> 

JS

$('.form-group').on('change',':input',function(){ 
    var $this = $(this); 
    var $group = $this.closest('.form-group'); 



    $group.attr('is-filled',!!($group.find('input').filter(':checked').length)); 

    var $text_inputs = $group.find('.text'); 

    if(!$text_inputs.length){ 
    return void(0); 
    } 

    var count = 0; 

    $.each($text_inputs,function(){ 
    var $that = $(this); 
    if($that.val() && $.trim($that.val()).length){ 
     count++; 
    } 

    }); 

    $group.attr('is-filled',!!(count)); 
}); 

$('.form-group').on('change',':input',updateCount); 




function updateCount(){ 
    $('#count').html('Current Count = ' + $('.form-group[is-filled="true"]').length); 

}