时间戳

首页 > 解决方案 > 如何比较两个输入值（文本和复选框）并输出结果

javascript - 如何比较两个输入值（文本和复选框）并输出结果

问题描述

我想比较这两个项目（文本和复选框）并输出结果。

例如，164cm S 是 A，186cm B 是 XL

如果用户输入高度并选择样式，想要输出一个与预先准备好的尺寸表相匹配的值。

我是初学者，所以这是我的计划。

这次，我要输出文本+单选按钮值

<script>
$(window).load(function(){
    $(".height, .style, .style_2").keyup(function() {
        var row = $(this).closest('tr');
        var height = parseInt(row.find('.height').val(), 10);
        var total = "height" + "style";
        row.find('.total').val(isNaN(total) ? '' : total);
     });
});
</script>



<table>
<tbody>        
<tr id="person_total">
<td><input name="height" type="number" class="span1 height" maxlength="5"></td>

<td>
<input type="radio" id="stylebox" name="stylebox" class="style" value="s" onClick="document.getElementById('hidfield').value=this.value" />
<label for="kjc-small">S</label>
<input type="radio" id="stylebox" name="stylebox" class="style" value="n" onClick="document.getElementById('hidfield').value=this.value"  />
<label for="kjc-normal">N</label>
<input type="radio" id="stylebox" name="stylebox" class="style" value="b" onClick="document.getElementById('hidfield').value=this.value" checked/>
<label for="kjc-big">B</label>
</td>
<td><input name="total" type="text" class="span1 total" readonly></td>
</tr>
</tbody>
</table>

标签： javascriptjquery

解决方案

  • 使用其他脚本控制器时不要onClick在 html 中使用。
  • input您可以在不需要label时插入id
  • id不能复制 ( id="stylebox")

$(document).ready(function(){

  /* get nodes */
  var totalNode = $('.total');
  var heightNode = $('.height');
  var styleNode = $('input[name="stylebox"]');

  /* initial state */
  var currentTotal = 0;
  
  var currentHeight = heightNode.val();
  var currentStyle = styleNode.val();
  calcTotal(); // calc state
  
  
  // when [input] Height change
  heightNode.on('input propertychange', function() {
    currentHeight = this.value;
    console.log('now height', currentHeight)
    
    calcTotal();
  })
  
  // when [radio] Style change
  styleNode.change(function() {
    currentStyle = this.value;
    console.log('now style', currentStyle)
    
    calcTotal();
  })
  
  // calc.
  function calcTotal() {
    currentTotal = currentHeight + currentStyle;
    totalNode.val(currentTotal);
    
    console.log('now total:', totalNode.val())
  }
});
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  
  
  <table>
    <tbody>        
      <tr id="person_total">
        <td>
          <label>
            <b>Height:</b>
            <input name="height" type="number" class="span1 height" value="0" maxlength="5">
          </label>
        </td>

        <!-- radio START -->
        <td>
          <label>
            <input type="radio" name="stylebox" class="style" value="s" />
            S
          </label>

          <label>
            <input type="radio" name="stylebox" class="style" value="n" />
            N
          </label>

          <label>
            <input type="radio" name="stylebox" class="style" value="b" checked/>
            B
          </label>
        </td>
        <!-- radio END -->

        <td>
          <label>
            <b>Total:</b>
            <input name="total" type="text" class="span1 total"  readonly>
          </label>
        </td>
      </tr>
    </tbody>
  </table>


  
</body>
</html>

推荐阅读