如何总结在输入字段中输入的特定值?

时间:2016-10-22 20:12:29

标签: javascript jquery forms

我的脚本是:

<script type = "text/javascript" >
  jQuery(document).ready(function($) {
    var $inputs = $('#input_6_1, #input_6_2, #input_6_3'),
      $sumInput = $('#input_6_4');
    $inputs.change(function() {
      var oneSum = 0;
      $inputs.each(function() {
        if ($(this).val() == "Y" || "y") {
          oneSum += $(this).val(), 1;
        }
      });
      $sumInput.val(oneSum);
    });
  }); 
</script>

如果我在三个输入字段中添加 YYY ,则值的输出为 0YYY ,但我想将值总和为3,因为有三个 y 在输入字段中,并显示3作为输出。

我该怎么做?

HTML

<label class="gfield_label" for="input_6_1">Number</label>
<div class="ginput_container ginput_container_number">
  <input name="input_1" id="input_6_1" value="" class="medium" tabindex="1" aria-invalid="false" type="text">
</div>
</li>
<li id="field_6_2" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_2">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_2" id="input_6_2" value="" class="medium" tabindex="2" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_3" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_3">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_3" id="input_6_3" value="" class="medium" tabindex="3" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_4" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_4">Sum Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_4" id="input_6_4" value="" class="medium" tabindex="4" aria-invalid="false" type="text">
  </div>
</li>

代码段:

jQuery(document).ready(function($) {
  var $inputs = $('#input_6_1, #input_6_2, #input_6_3'),
    $sumInput = $('#input_6_4');
  $inputs.change(function() {
    var oneSum = 0;
    $inputs.each(function() {
      if ($(this).val() == "Y" || "y") {
        oneSum += $(this).val(), 1;
      }
    });
    $sumInput.val(oneSum);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="gfield_label" for="input_6_1">Number</label>
<div class="ginput_container ginput_container_number">
  <input name="input_1" id="input_6_1" value="" class="medium" tabindex="1" aria-invalid="false" type="text">
</div>
</li>
<li id="field_6_2" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_2">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_2" id="input_6_2" value="" class="medium" tabindex="2" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_3" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_3">Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_3" id="input_6_3" value="" class="medium" tabindex="3" aria-invalid="false" type="text">
  </div>
</li>
<li id="field_6_4" class="gfield field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_6_4">Sum Number</label>
  <div class="ginput_container ginput_container_number">
    <input name="input_4" id="input_6_4" value="" class="medium" tabindex="4" aria-invalid="false" type="text">
  </div>
</li>

3 个答案:

答案 0 :(得分:1)

似乎正在替换

if( $( this ).val() == "Y" || "y" ) {
  oneSum += $( this ).val(), 1;

if( $( this ).val() == "Y" || $( this ).val() == "y" ) {
  oneSum += 1;

应该这样做。

答案 1 :(得分:0)

对于是/否输入,您确实应该使用复选框。然后你可以计算复选框的数量。在您的情况下,您可以直接在jquery选择器中按值查询,然后计算找到的输入数。

&#13;
&#13;
$(function() {
  console.log($('input[value=Y]').length);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="Y">
<input value="N">
<input value="Y">
&#13;
&#13;
&#13;

这也适用于单选按钮组,但是没有看到你的HTML,我决定采用最简单的输入法。

答案 2 :(得分:0)

以下是您的纠正代码:)

jQuery( document ).ready( function( $ ) { 
    var $inputs = $( '#input_6_1, #input_6_2, #input_6_3' ),
        $sumInput = $( '#input_6_4' );
$inputs.change( function() {
    var oneSum = 0,val=''; 
    $inputs.each( function() {
        if( $( this ).val() == "Y" ||$( this ).val() == "y" ) {
            oneSum +=1;val+=$( this ).val();
        }
    } );
    $sumInput.val( oneSum+val );
} );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="gfield_label" for="input_6_1">Number</label><div class="ginput_container ginput_container_number"><input name="input_1" id="input_6_1" value="" class="medium" tabindex="1" aria-invalid="false" type="text"></div></li><li id="field_6_2" class="gfield field_sublabel_below field_description_below"><label class="gfield_label" for="input_6_2">Number</label><div class="ginput_container ginput_container_number"><input name="input_2" id="input_6_2" value="" class="medium" tabindex="2" aria-invalid="false" type="text"></div></li><li id="field_6_3" class="gfield field_sublabel_below field_description_below"><label class="gfield_label" for="input_6_3">Number</label><div class="ginput_container ginput_container_number"><input name="input_3" id="input_6_3" value="" class="medium" tabindex="3" aria-invalid="false" type="text"></div></li><li id="field_6_4" class="gfield field_sublabel_below field_description_below"><label class="gfield_label" for="input_6_4">Sum Number</label><div class="ginput_container ginput_container_number"><input name="input_4" id="input_6_4" value="" class="medium" tabindex="4" aria-invalid="false" type="text"></div></li>