我有一个带有单选按钮,复选框和文本字段的表单。
例如,
第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做到这一点?
最佳答案
请参见小提琴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);
}