問題

我想比較兩個專案(文字和複選框)並輸出結果.

例如,164釐米和樣式S是A,186釐米,樣式B是XL

  • 輸入數是高度,無線電按鈕值是3種樣式(小,正常,大)
  • 輸出是164s 186b
  • 我使用if==顯示結果為’S,M,L,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>
 

  最佳答案

  • 當您使用其他指令碼控制器時,不要在html中使用onClick.
  • 您可以在 label 中插入 input,當 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> 

  相同標籤的其他問題

javascriptjquery