给两个文本框一个使用 Javascript 或 jQuery 填充的相同值

Give two text boxes the same value one is filled in using Javascript or jQuery

本文关键字：填充 jQuery Javascript 一个 文本 两个      更新时间：2023-09-26

我有 2 个文本框，类型="数字"。1 个文本框是我的"主"文本框，然后我有另一个后续文本框，我希望如果"主"文本框填充了一个数字，则后续文本框将获得相同的值。

我想过使用 data- 属性，

但我不确定如何定位是否填充了"master"文本框，然后使用相同的 data- 属性在子文本框中放置相同的值。

在下面的示例中，我还使用跨度来创建加号和减号按钮，这些按钮根据值调整值。这是在JS部分。

我目前的HTML如下：

<div id="masterTextboxes">
    <span class="minusBtn AddMinusButton">-</span>
      <input type="number" value="" placeholder="0" data-attendees="Adult" />
    <span class="addBtn AddMinusButton">+</span>
    <span class="minusBtn AddMinusButton">-</span>
     <input type="number" value="" placeholder="0" data-attendees="Child" />
    <span class="addBtn AddMinusButton">+</span>
</div>
<!--Values from Master Textboxes should populate into these textboxes as well.-->
<div id="subTextboxes">
    <span class="minusBtn AddMinusButton">-</span>
      <input type="number" value="" placeholder="0" data-attendees="Adult" />
    <span class="addBtn AddMinusButton">+</span>
    <span class="minusBtn AddMinusButton">-</span>
     <input type="number" value="" placeholder="0" data-attendees="Child" />
    <span class="addBtn AddMinusButton">+</span>
</div>

爪哇语

<script>
$(document).ready(function () {
   /*Add an minus buttons for variants*/
$(".AddMinusButton").on('click touchstart', function (event) {
    event.preventDefault();
    //Add button active style for touch.
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    var newVal = oldValue;
    //Hide .decButton for oldValue
    if (newVal == 0 || oldValue == 0 ) {
        oldValue = 0;
    }
    else { $button.parent().find(".minusBtn").show(); }
    if ($button.text() == "+") {
        newVal = parseFloat(oldValue) + 1;
        // Don't allow decrementing below zero
        if (oldValue >= 1) {
            newVal = parseFloat(oldValue) - 1;
        }
    }
    $button.parent().find("input.attendeeQuantityInput").val(newVal);
   //Sub textboxes should take value of master textboxes. Is this correct syntax?
   //This is probably wrong.
    $('#subTextboxes input').data("attendee").val(newVal);
});//End button click
});
</script>

我希望这对我试图摆脱困境是有意义的。

提前谢谢。

我希望如果"主"文本框填充了一个数字， 后续文本框将获得相同的值。

你可以这样做：

<p>
  <label>Master 1: <input type="number" id="master1" placeholder="0" /></label><br>
  <label>Dependant 1: <input type="number" class="dependant1" placeholder="0" /></label>  
</p>
<p>
  <label>Master 2: <input type="number" id="master2" placeholder="0" /></label><br>
  <label>Dependant 2: <input type="number" class="dependant2" placeholder="0" /></label><br>
  <label>Dependant 2: <input type="number" class="dependant2" placeholder="0" /></label>  
</p>

在 JS：

$("input[id^='master']").on("change", function(){
  var no = this.id.replace("master", "");
  var selector = ".dependant" + no
  $(selector).val(this.value);                    
});

这利用了 jQuery 的属性以选择器开头，并且只要类名匹配，就可以用于任意数量的输入。

演示

你可以

这样做：

.HTML：

<div id="masterTextboxes">
    <p>Master</p>
      <input type="number" value="" placeholder="0" data-attendees="Adult" />
     <input type="number" value="" placeholder="0" data-attendees="Child" />
</div>
<div id="subTextboxes">
    <p>Sub</p>
      <input type="number" value="" placeholder="0" data-attendees="Adult" />
     <input type="number" value="" placeholder="0" data-attendees="Child" />
</div>

.JS：

// On change in master inputs...
$("#masterTextboxes input", this).on("change", function() {
    // Store Master inputs in master variable and Sub inputs in sub variable.
    var master = $("#masterTextboxes input"),
        sub = $("#subTextboxes input");
    // Match master and sub values by using the master array key as reference.
    $(sub[$.inArray($(this)[0], master)]).val( $(this).val() );
});

jQuery 代码依赖于以下条件：Sub 输入遵循与每个相应div 中的主输入相同的顺序。

JSFiddle：

这是一个工作JSFiddle供参考。

相关文章：