Question

我想使用jQuery来查看是否有三个文本框已更改，因此我可以通过AJAX发送数据。

我尝试了一个简单的脚本：

$("#name, #position, #salary").change(function()
{
     console.log("All data are changed");
});

其中姓名，职位和工资是三个文本框的相应ID。

结果是当我改变第一个时：

当我改变第二个时：

这是第三个：

因此，当单独更改每个文本框时，我收到了消息。我需要的是当这三个被更改时，显示消息。我是jQuery的新手，所以我想知道我是否可以在jQuery中使用类似IF ... AND ... AND的内容。

Answer 1

许多验证框架在用户更改值后都具有脏输入的概念。您可以实现此操作并检查所有字段何时变脏。

$("#name, #position, #salary").change(function() {
  this.classList.add("dirty");
  if ($(".dirty").length === 3) {
    console.log("All data are changed");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="position" />
<input id="salary" />

我们可以将其抽象为jQuery插件以实现可重用性

$.fn.allChange = function(callback) {
  var $elements = this;
  $elements.change(function() {
    this.classList.add("dirty");
    if (callback && $elements.filter(".dirty").length === $elements.length) {
      callback.call($elements);
    }
  });
  return $elements;
}

$("#name, #position, #salary").allChange(function() {
  console.log("All data are changed");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="position" />
<input id="salary" />

Answer 2

您可以将更改的输入存储在数组中，并检查它的长度以检测是否所有输入都已更改。

var changedInputs = [];
$("#name, #position, #salary").change(function()
{
     changedInputs.push(this.id);
     if(changedInputs.length === 3) {
       alert('All 3 inputs where changed!');
     }
});

Answer 3

您可以尝试：

var changedInputs = [];
$("#name, #position, #salary").change(function()
{
   if !(changedInputs.include(this.id) ){
     changedInputs.push(this.id);
     if(changedInputs.length == 3) {
        alert('All 3 inputs where changed!');
   }
});

Answer 4

您也可以使用此方法。 Fiddle

var isNameChanged, isPositionChanged, isSalaryChanged = false;

function fieldsChanged()
{
    var id = $(this).attr('id');
    if (id == 'name') isNameChanged = true;
    else if (id == 'position') isPositionChanged = true;
    else if (id == 'salary') isSalaryChanged = true;

  if (isNameChanged && isPositionChanged && isSalaryChanged) {
    console.log('All have been changed');
    isNameChanged = isPositionChanged = isSalaryChanged = false;
  }
}

$(function(){
    $('#name, #position, #salary').change(fieldsChanged);
});

Answer 5

将多个选择器存储在变量中。在.change()循环遍历多选择器中的元素以测试输入值。如果所有输入都有内容，则可以调用其他功能。

＆＃13;

$(document).ready(function(){
  
  var $selectors = $('#input1, #input2, #input3');

  $selectors.change(function(){
    var allChanged = true;
    console.log($(this).attr('id') + ' was changed.');

    $selectors.each(function(){ 
      if ($(this).val() == '') {
        allChanged = false;
      }
    });

    if (allChanged) {
      // $().ajax();
    }

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input id="input3">

＆＃13;

Answer 6

尝试使用课程：

<input class="need">
<input class="need">
<input class="need">
$(".need").change(function()
{
  var all = 0;
    $(".need").each(function(i,v){
        if ($(v).val().length >0 ) {
          all+=1; 
        }
    });
    if(all.length == 3) {
       alert('All 3 inputs where changed!');
     }
});

Answer 7

一种可能的解决方案：

var needed = ["name", "position", "salary"];

$("#name, #position, #salary").change(function()
{
    if(needed.length == 0) return;
    needed.splice(needed.indexOf($(this).attr('id')), 1);
    if(needed.length == 0)
        console.log("All data are changed");
});

首先，您需要为所有必填字段初始化“必需”数组然后，当一个字段被更改时，您从所需的数组中删除该字段一旦数组为空，所有必需的值都会更改;）

第一个条件是确保不要多次记录消息

Answer 8

您可以将当前输入值与默认输入值进行比较，然后逻辑可能如下：

顺便说一句，我为所有要检查的输入设置了一个公共类，因为这是应该如何完成的...

＆＃13;

$('.inputToCheck').on('change', function() {
  var allInputsChanged = !$('.inputToCheck').filter(function() {
    return this.value === this.defaultValue;
  }).length;
  if (allInputsChanged) alert('All inputs changed!');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" class="inputToCheck">
<input id="position" class="inputToCheck">
<input id="salary" class="inputToCheck">

＆＃13;

我们可以使用和运算符来组合多个jQuery事件

8 个答案: