0

我正在开发一个项目，用户必须在其中选择一个选项。选项是单选按钮。目前我正在获得 keyup 事件的结果。当用户选择一个选项然后在输入字段中输入值时，他在另一个结果输入字段中得到结果。它工作正常，但是当用户想要更改选项并选择另一个选项时出现问题，现在他必须在输入字段中再次输入值，这是不正确的我想要做的是当他选择另一个选项时结果应该自动结果输入字段的变化，因为他已经在输入字段中输入了一个值。

这里是整个过程的jsfiddle

这是html：

       <td>
       <input type="radio" name="rdbtn-im" id="rdbtn-im-day" value="25" class="rdbtn-style-social"  />Daily&nbsp;
       <input type="radio" name="rdbtn-im" id="rdbtn-im-week" value="25" class="rdbtn-style-social"  />Weekly
       </td>

这是结果输入

          result<input type="text"  name="final_res" id="final_res" class=""  style="width:100px;margin: 2px;"/>

这是我的jQuery

     var val = 0;

     jQuery("#rdbtn-im-day").click( function(){
    if( jQuery(this).is(":checked") ){ // check if the radio is checked
         val = jQuery(this).val(); // retrieve the value
    }
    });

    jQuery("#rdbtn-im-week").click( function(){
    if( jQuery(this).is(":checked") ){ // check if the radio is checked
         val = jQuery(this).val() * 7; // retrieve the value
    }
   });  

   jQuery("#txt_im").keyup(function(){ 
   var txt_value =  jQuery(this).val();
    var res = txt_value * val;

    var final = parseInt(res);
    var MBresult = final/1024;

    jQuery('#final_res').val(MBresult.toFixed(2));

我正在使用 jquery-1.3.2.min.js，它在右侧下拉列表中不可用。

提前致谢

4

1 回答 1

2

您可以简化功能：

  • 删除收音机上的点击事件，而不是使用更改事件。
  • 更改您的单选按钮标记以设置实际值，而不是稍后进行计算
  • 无需使用变量val来维护选中的单选按钮的值。

脚本

jQuery("#txt_im").keyup(setValue); // on keyup of textbox call the function to calculate
jQuery('[name="rdbtn-im"]').change(setValue); // on keyup of textbox call the function to calculate

function setValue() {
    var txt_value = jQuery("#txt_im").val(); //Get the textbox val
    var rad_val = jQuery('[name="rdbtn-im"]:checked').val(); //Get the checked radio val

    if (!txt_value.length || !rad_val.length) return; // Don't do if either of them is not available
    var res = txt_value * rad_val;
    var final = parseInt(res, 10);
    var MBresult = final / 1024;
    jQuery('#final_res').val(MBresult.toFixed(2));
}

无线电标记部分

<input type="radio" name="rdbtn-im" id="rdbtn-im-day" value="25" class="rdbtn-style-social" />Daily&nbsp;
<input type="radio" name="rdbtn-im" id="rdbtn-im-week" value="175" class="rdbtn-style-social" />Weekly</td>

小提琴

于 2013-06-23T06:18:20.707 回答