我有一个带有单选按钮,复选框和文本字段的表单。
例如,
第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);

}

07-28 02:05
查看更多