首页 > 解决方案 > 将一组 ID 传递给函数(onchange 函数)

问题描述

我有 10 个 html 表格行。在每一行中,我有 1 个复选框和 2 个输入框,每个元素都有一个唯一的 ID(AA、Price_1、RTprice_1、AB、Price_2、RTprice_2....AJ、Price_10、RTprice_10)

选中复选框后尝试禁用相应的输入字段。我正在为每一行重复该功能。如何将每组变量传递给下面的函数而不是 10 个函数?脚本:

document.getElementById("AA").onchange = function() {
document.getElementById('price_1').disabled = !this.checked;
document.getElementById('RTprice_1').disabled = !this.checked;
document.getElementById('price_1').value = "0";
document.getElementById('RTprice_1').value = "0";
document.getElementById('AA').value = "0";
};  

                                       
document.getElementById("AB").onchange = function() {
document.getElementById('price_2').disabled = !this.checked;
document.getElementById('RTprice_2').disabled = !this.checked;
document.getElementById('price_2').value = "0";
document.getElementById('RTprice_2').value = "0";
document.getElementById('AB').value = "0";};

标签: javascriptvariablescheckbox

解决方案


<input id='1' onchange="changeUI(1)" />                    // AA
   <input class='inputfield' id='inputfield1-1' />         // price_1
   <input class='inputfield' id='inputfield1-2'/>          // RTprice_1

<input id='2' onchange="changeUI(2)" />                   // AB
   <input class='inputfield' id='inputfield1-2'/>         // price_2
   <input class='inputfield' id='inputfield1-2'/>         // RTprice_2
... 
<input id='10' onchange="changeUI(10)" />
   ...

你的功能

function changeUI(x) {
    var id = x;
    $('.inputfield').hide();
    
    $('#inputfield1-' + x).show();
    $('#inputfield2-' + x).show();

    $('#inputfield1-' + x).val("0");
    $('#inputfield2-' + x).val("0");
    $('#' + x).val("0");
    });

推荐阅读