Question

是否有一种方法可以给一堆输入提供相同的ID，然后在选中一个复选框后对其进行迭代，并将它们各自的值更新为MAX属性？例如，使用以下HTML：

python-3.7.2

...而JS就像这样：

CHECK ALL: <input type="checkbox" id="someIDname">
<input type="number" max="80" id="anotherIDname">
<input type="number" max="90" id="anotherIDname">
<input type="number" max="99" id="anotherIDname">
<input type="number" max="65" id="unrelated">
<input type="number" max="75" id="unrelated">

我想在选中此复选框时，使用“ anotherIDname” ID填充所有MAX属性。（然后我将拥有三个盒子，一个盒子有80个，一个盒子有90个，一个盒子有99个。另外两个是不同的ID，所以就不用管它们了。）

这里是JS / jQuery的初学者总数...上面的脚本在第一个框上起作用，但不会使用“ anotherIDname” ID更新其他脚本。（我想也许“ .each”可以一次完成所有任务，但是……我想那不是它的工作原理。（通常，我更像是一个PHP专家，这就是如果在服务器端，类似这样的可能可以工作。）任何想法都值得赞赏。

Answer 1

没什么错的

id在页面中始终是唯一的。相同的class被分配给具有相同功能的元素
您应该使用$(this).val()来设置值

$(document).ready(function() {
    $('#someIDname').click(function(event) {  

        if(this.checked) {

            $('.anotherIDname').each( function() {
                var maxValue = $(this).attr("max");
                console.log(maxValue);
                $(this).val(maxValue) 
            });

        }

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="someIDname">
<input type="number" max="80" class="anotherIDname">
<input type="number" max="90" class="anotherIDname">
<input type="number" max="99" class="anotherIDname">
<input type="number" max="65" class="unrelated">
<input type="number" max="75" class="unrelated">

Answer 2

添加了一个类名并使用了querySelectorAll。可以按照您的意愿工作吗？

$(document).ready(function() {
    $('#someIDname').click(function(event) {  

        if(this.checked) {
          document.querySelectorAll('.max').forEach(a => {
            a.value = a.max;
          });
        }

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CHECK ALL: <input type="checkbox" id="someIDname">
<input type="number" max="80" id="anotherIDname" class="max">
<input type="number" max="90" id="anotherIDname" class="max">
<input type="number" max="99" id="anotherIDname" class="max">
<input type="number" max="65" id="unrelated" class="max">
<input type="number" max="75" id="unrelated" class="max">

Answer 3

id在页面中必须唯一。因此，您不能在多个地方使用相同的ID。但是，您可以在多个地方使用同一类。

因此，您需要将id更改为class，例如：

<input type="number" max="80" class="maxinput" />

并通过max属性设置value：

$('.maxinput').val(function() { 
  return $(this).attr('max') 
});

但是，我建议使用data-*而不是简单的属性：

<input type="number" data-max="80" class="maxinput" />

并获取data值：

$('.maxinput').val(function() { 
  return $(this).data('max') 
});

但是我仍然感到惊讶的是，为什么您不首先简单地设置它们的值？

<input type="number" class="maxinput" value="80" />

遍历N个输入框，将每个输入框更新为最大值

3 个答案: