javascript - 输入文本(数字)，复选框值(文本)输出结果

Question

我需要输入数字和复选框值(文本)的输出结果。

我做了一些代码。

与准备好的数据进行比较，显示结果，但仅使用数字范围太大。

所以我更改了复选框值“a、b、c”而不是“1、2、3”，但它不起作用。

我该如何解决这个问题？

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
window.onload=function(){
$('.height,.style').on('change, input', 
function(){
$('.total').val($('.height').val() * $('.style:checked').val());
});
$('.height,.style').on('change, input', 
function(){
    var total2 = $( 'input#total' ).val();
    if ( total2 == 168a ) {
        document.getElementById("total2").innerHTML = 'S';
    } else if ( total2 == 170a) {
        document.getElementById("total2").innerHTML = 'M';
    } else if ( total2 == 182a) {
        document.getElementById("total2").innerHTML = 'XL';
    } else if ( total2 == 165b) {
        document.getElementById("total2").innerHTML = 'S';
    } else if ( total2 == 175b) {
        document.getElementById("total2").innerHTML = 'M';
    } else if ( total2 == 180b) {
        document.getElementById("total2").innerHTML = 'L';
    } else if ( total2 == 175c) {
        document.getElementById("total2").innerHTML = 'L';
    } else if ( total2 == 176c) {
        document.getElementById("total2").innerHTML = 'XL';

    } else {
        document.getElementById("total2").innerHTML = 'XL';
    }
});
function onlyNumber(){
    if((event.keyCode<48)||(event.keyCode>57))
        event.returnValue=false;
    }
}
</script>

<table>
<tbody>        
<tr id="person_total">
<td><input name="height" type="number" class="span1 height" min="150" max="200" maxlength="3"></td>
<td>
<input type="radio" name="stylebox" class="style" value="a">
<label for="kjc-small">S</label>
<input type="radio" name="stylebox" class="style" value="b" checked="">
<label for="kjc-normal">N</label>
<input type="radio" name="stylebox" class="style" value="c">
<label for="kjc-big">B</label>
</td>

<td><input name="total" type="hidden" id="total" class="span1 total"></td>

</tr>
</tbody>
</table>

<div id="total2"></div>

Answer 1

据我所知，* 不用于字符串连接。 + 用于连接...所以一些数字 + '(null)' + 一些字母将返回一个字符串。在您的 if 语句中，您需要将它们读作字符串……所以是“170a”，而不是 170a。计算机无法识别 170a 是什么...它是整数、 float 等吗？与“170a”显然是一个字符串，计算机可以检查字符串是否相等，即 var x = 'hi'; if (x == 'hi') { alert('yes!'); }。您不必制作另一个事件监听器来监听相同的事件，而只需调用另一个函数，或者甚至将代码包含在监听器的函数中以运行代码。

所以这将执行您几乎 javascript/jQuery/psuedocode 所描述的...但是...如果您希望它执行我认为您打算执行的操作...请给我 15 分钟。编辑:从头开始。我没有足够的数据来确定什么需要去哪里……这个概念就在那里……它在返回信息方面起作用。

        window.onload=function()
        {
            $('.height,.style').on('change, input', 
                function(){
                    var my_var = $(".height").val() + '' + $("input[name='stylebox']:checked").val();
                    //alert(my_var);
                    document.getElementById('total').value = my_var;
                    update_func(my_var);
            });
            //No need to have that twice...
            /*$('.height,.style').on('change, input', */

            function update_func(x){
            //this is x
                total2 = x;
                /*var total2 = $( 'input#total' ).val();*/
                if ( total2 == '168a') {
                    document.getElementById("total2").innerHTML = 'S';
                } else if ( total2 == '170a') {
                    document.getElementById("total2").innerHTML = 'M';
                } else if ( total2 == '182a') {
                    document.getElementById("total2").innerHTML = 'XL';
                } else if ( total2 == '165b') {
                    document.getElementById("total2").innerHTML = 'S';
                } else if ( total2 == '175b') {
                    document.getElementById("total2").innerHTML = 'M';
                } else if ( total2 == '180b') {
                    document.getElementById("total2").innerHTML = 'L';
                } else if ( total2 == '175c') {
                    document.getElementById("total2").innerHTML = 'L';
                } else if ( total2 == '176c') {
                    document.getElementById("total2").innerHTML = 'XL';
                } else {
                    document.getElementById("total2").innerHTML = 'XL';
                }
            }

            function onlyNumber()
            {
                if((event.keyCode<48)||(event.keyCode>57))
                {
                    event.returnValue=false;
                }
            }
        }

    <html>
    <head>
        <script src="https://code.jquery.com/jquery-1.7.1.js"></script>
    </head>
    <body>
    <table>
    <tbody>
        <tr id="person_total">
            <td><input id="height" name="height" type="number" class="span1 height" min="150" max="200" maxlength="3"></td>
            <td>
                <input type="radio" name="stylebox" class="style" value="a">
                <label for="kjc-small">S</label>
                <input type="radio" name="stylebox" class="style" value="b" checked="">
                <label for="kjc-normal">N</label>
                <input type="radio" name="stylebox" class="style" value="c">
                <label for="kjc-big">B</label>
            </td>
            <td><input name="total" type="hidden" id="total" class="span1 total"></td>
        </tr>
    </tbody>
    </table>

    <div id="total2"></div>
    </body>
    </html>