jQuery onChange事件多个输入

基础概念

onChange 事件是JavaScript中的一个事件，当HTML元素的值发生变化时触发。在jQuery中，可以使用.change()方法来绑定这个事件。当涉及到多个输入元素时，可以通过选择器一次性为多个元素绑定事件处理函数。

类型与应用场景

文本输入框：当用户在文本框中输入内容时触发。
下拉选择框：用户更改选项时触发。
复选框和单选按钮：用户更改选择时触发。

示例代码

假设我们有多个输入元素，包括文本框、下拉菜单和复选框，我们希望在它们的值改变时执行相同的操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery onChange Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" id="textInput" placeholder="Type something...">
<select id="selectInput">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>
<input type="checkbox" id="checkboxInput">

<script>
$(document).ready(function(){
  // 绑定onChange事件到所有指定的输入元素
  $('#textInput, #selectInput, #checkboxInput').change(function() {
    console.log('Value changed!');
    // 根据不同的元素执行不同的操作
    if(this.id === 'textInput') {
      console.log('Text input changed to: ' + $(this).val());
    } else if(this.id === 'selectInput') {
      console.log('Select input changed to: ' + $(this).val());
    } else if(this.id === 'checkboxInput') {
      console.log('Checkbox input is now: ' + $(this).is(':checked'));
    }
  });
});
</script>

</body>
</html>