Question

首先，请原谅我，如果我遗漏了任何信息，或者我不清楚，我对此非常陌生，仍然掌握它。

我有以下表格：

我需要两个％输入字段才能自动完成，因此总和为100％。如果输入1为90％，则输入2应自动完成为10％，反之亦然。

这是HTML：

<!-- Tabla - - - - - - - -->
<div id="distDosFondos" class="table-responsive cambioDist">
    <p>Selecciona fondos y porcentajes a distribuir:</p>
    <!--table-responsive-->
    <table class="table">
        <thead>
            <tr>
                <th>Fondo</th>
                <th>%</th>
            </tr>
        </thead>
        <tbody>
        <!-- Fila Cambio y Distribución de Fondos -->
            <tr>
                <td>
                    <div class="inputForm">
                        <select class="chosen" id="fondos1" name="fondos1">
                            <option value="">Fondo</option>
                        </select>
                    </div>
                </td>
                <td>
                    <div class="inputForm">
                        <input id="porcentage1" name="porcentage" type="text" class="form-control porcentage porcentaje1">
                    </div>
                </td>
            </tr>
            <!-- //Fila Cambio y Distribución de Fondos -->
            <!-- Fila Cambio y Distribución de Fondos -->
            <tr>
                <td>
                    <div class="inputForm">
                        <select class="chosen" id="fondos2" name="fondos2">
                            <option value="">Fondo</option>
                        </select>
                    </div>
                </td>
                <td>
                    <input id="porcentage2" name="porcentage" type="text" class="form-control porcentage porcentaje2">
                </td>
            </tr>
            <!-- //Fila Cambio y Distribución de Fondos -->
        </tbody>
    </table>
</div>
<!-- Tabla - - - - - - - -->

Answer 1

有很多方法可以解决这个问题，但这是一个非常简单的解决方案。

首先，为两个输入的input事件设置处理程序

$("[name='porcentage']").on("input", function() {
    ...
});

现在，在此内部，您将处理更改其他输入。首先，让我们确保百分比不能超过100，并且不能低于0.

if($(this).val() > 100)
    $(this).val(100);
else if($(this).val() < 0)
    $(this).val(0);

接下来，您需要获取其他输入，即您要更改的输入。

var otherInput = $(this).attr("id") == "porcentage1" ? $("#porcentage2") : $("#porcentage1");

最后，设置其他输入的值，使两者加起来为100。

$(otherInput).val(100 - $(this).val());

完整代码：

$("[name='porcentage']").on("input", function() {
    if($(this).val() > 100)
        $(this).val(100);
    else if($(this).val() < 0)
        $(this).val(0);

    var otherInput = $(this).attr("id") == "porcentage1" ? $("#porcentage2") : $("#porcentage1");
    $(otherInput).val(100 - $(this).val());
});

Fiddle

Answer 2

一种可能性是使用jQuery库：

$('#porcentage1, #porcentage2').on('input', function (event) {
        var inputValue = parseInt($(this).val());

        if (inputValue >= 0 && inputValue <= 100) { //ensure number is between 0 and 100
            var otherValue = 100 - inputValue;
            if (this.id === 'porcentage1') { //determines which input element was filled
                $('#porcentage2').val(otherValue);
            } else {
                $('#porcentage1').val(otherValue);
            }
        }
})

您可能必须使用其他验证/检查以确保用户实际上正在输入数字等。

Answer 3

没有jQuery：

// attach a bunch of events to both inputs to handle any kind of change
['change', 'keyup', 'paste'].forEach(function(event) {

    // .bind here essentially serves to pass reference of the current updated input, and the other input wich will be updated
    porcentage1.addEventListener(event, onPercentageChange.bind(null, porcentage1, porcentage2));
    porcentage2.addEventListener(event, onPercentageChange.bind(null, porcentage2, porcentage1));
});

function onPercentageChange(updatedInput, otherInput) {

    var updatedValue = parseInt(updatedInput.value) || 0;

    otherInput.value = 100 - updatedValue;
}

https://jsfiddle.net/tb7a7joc/

适用于IE9 +

根据具有百分比的其他输入自动完成输入

3 个答案: