Question

我正在尝试添加一个li标签内的特定输入ID值。但它只获得第一个数字。我不知道如何让第二和第三个工作。我是javascript的新手。下面是代码的样子。

HTML

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight'/>
</li>

<li id="Pallet1" class="inactive">
<span class="itemNumber">2</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f"/>
</li>

<li id="Pallet1" class="inactive">
<span class="itemNumber">3</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2"/>
</li>

<span id="total"></span>

javascript

$(".weight").keyup(function(){    

var totalweight = $(".weight").val();
var totalweight2 = $("#f").val();
var totalweight3 = $("#f2").val();

if(totalweight2 == "" && totalweight3 == ""){
    var total = totalweight;
}
if(totalweight3 == ""){
    var total = Number(totalweight)+Number(totalweight2);
}
//this must add up
if(totalweight != "" && totalweight2 != "" && totalweight3 != ""){
    var total = Number(totalweight)+Number(totalweight2)+Number(totalweight3);
}

$("#total").text(total);
if(total == ""){
   $("#total").text("0");
}
});

Answer 1

这就是好事DEMO。如果用户按任何字母表，您不需要担心这一点。如果输入只是一个数字，本脚本将计算。

您可以使用下面的html标记，

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight' />
</li>
<li id="Pallet1" class="inactive">
<span class="itemNumber">2</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f" class='weight' />
</li>
<li id="Pallet1" class="inactive">
<span class="itemNumber">3</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2" class='weight' />
</li>
<span id="total"></span>

您只需使用此类javascript代码，

即可

$(".weight").keyup(function () {
    var sum = 0;
    $('.weight').each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += +this.value;
        }
    });
    $('#total').text(sum);
});

看到这句好话DEMO

Answer 2

<script>
function GetAll()
{
   var c = document.getElementsByName("weight");
  // loop over them all
  for (var i=0; i<c.length; i++) {
     alert(c[i]);
 }

}
</script>

此功能提醒所有值。希望这对您有帮助。

Answer 3

你有两个错误：

您对多个元素使用相同的ID（这与您的问题无关，但仍然是大错误）
您已为第一个输入类weight并创建了与该类相关的事件，该事件仅在更改第一个输入值时触发

检查The code on JSFiddle

HTML：

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight'/>
</li>

<li id="Pallet2" class="inactive">
<span class="itemNumber2">2</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f" class='weight'/>
</li>

<li id="Pallet3" class="inactive">
<span class="itemNumber3">3</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2" class='weight'/>
</li>

<span id="total"></span>

JS：

$(".weight").keyup(function(){    

var totalweight = $("#QT").val();
var totalweight2 = $("#f").val();
var totalweight3 = $("#f2").val();

if(totalweight2 == "" && totalweight3 == ""){
    var total = totalweight;
}
if(totalweight3 == ""){
    var total = Number(totalweight)+Number(totalweight2);
}
//this must add up
if(totalweight != "" && totalweight2 != "" && totalweight3 != ""){
    var total = Number(totalweight)+Number(totalweight2)+Number(totalweight3);
}

$("#total").text(total);
if(total == ""){
   $("#total").text("0");
}
});

Answer 4

var totalweight = $(".weight");
alert(totalweight[0].value); // alerts the value of the first input with the class of weight

添加输入类型值

4 个答案: