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

How to sum up specific values that are entered in input field?

本文关键字：输入 何总结 字段      更新时间：2023-09-26

我的脚本是:

<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>

如果我在三个输入字段中添加Y YY，则输出值为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>

似乎替换

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


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

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

$(function() {
  console.log($('input[value=Y]').length);
});
<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">

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

修改后的代码:)

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>

相关文章：