Web开发：checked状态

checked状态

• 使用原生 JavaScript
• • 判断单个复选框的 `checked` 状态
  • 判断单个单选按钮的 `checked` 状态
  • 判断一组单选按钮的 `checked` 状态
• 使用 jQuery
• • 判断复选框的 checked 状态
  • 判断单选按钮的 `checked` 状态

使用原生 JavaScript

判断单个复选框的 checked 状态

HTML部分：

<input type="checkbox" id="myCheckbox">

这段代码创建了一个复选框，并赋予其 id 为 myCheckbox。在后面的JavaScript代码中，我们将使用这个 id 来获取该复选框元素。

JavaScript部分：

var checkbox = document.getElementById('myCheckbox');
if (checkbox.checked) {
  console.log('Checkbox is checked');
} else {
  console.log('Checkbox is not checked');
}

解释：

1. 获取元素：document.getElementById('myCheckbox')

   • 通过 document.getElementById 方法，我们可以获取 id 为 myCheckbox 的元素，并将其赋值给变量 checkbox。

2. 检查 checked 属性：checkbox.checked

   • 复选框元素有一个布尔属性 checked，用来表示复选框是否被选中。checkbox.checked 返回 true（选中）或 false（未选中）。

3. 条件判断：if (checkbox.checked) { ... } else { ... }

   • 使用 if...else 语句来检查 checked 属性的值。
   • 如果复选框被选中（checked 为 true），打印 “Checkbox is checked”。
   • 否则，打印 “Checkbox is not checked”。

判断单个单选按钮的 checked 状态

HTML部分：

<input type="radio" name="myRadio" id="myRadio1" value="option1">
<input type="radio" name="myRadio" id="myRadio2" value="option2">

这段代码创建了两个单选按钮，它们共享相同的 name 属性 myRadio，分别赋予 id 为 myRadio1 和 myRadio2。

JavaScript部分：

var radio1 = document.getElementById('myRadio1');
var radio2 = document.getElementById('myRadio2');
if (radio1.checked) {
  console.log('Radio 1 is checked');
} else if (radio2.checked) {
  console.log('Radio 2 is checked');
} else {
  console.log('No radio button is checked');
}

解释：

1. 获取元素：document.getElementById('myRadio1') 和 document.getElementById('myRadio2')

   • 分别获取 id 为 myRadio1 和 myRadio2 的单选按钮元素，并将它们赋值给变量 radio1 和 radio2。

2. 检查 checked 属性：radio1.checked 和 radio2.checked

   • 单选按钮元素也有一个布尔属性 checked，用来表示按钮是否被选中。radio1.checked 和 radio2.checked 返回 true 或 false。

3. 条件判断：if (radio1.checked) { ... } else if (radio2.checked) { ... } else { ... }

   • 使用 if...else if...else 语句来分别检查每个单选按钮的 checked 状态。
   • 如果第一个单选按钮被选中，打印 “Radio 1 is checked”。
   • 如果第二个单选按钮被选中，打印 “Radio 2 is checked”。
   • 如果没有单选按钮被选中，打印 “No radio button is checked”。

判断一组单选按钮的 checked 状态

HTML部分：

<input type="radio" name="myRadioGroup" id="radio1" value="option1">
<input type="radio" name="myRadioGroup" id="radio2" value="option2">
<input type="radio" name="myRadioGroup" id="radio3" value="option3">

这段代码创建了一组单选按钮，它们共享相同的 name 属性 myRadioGroup，但 id 和 value 属性各不相同。

JavaScript部分：

var radios = document.getElementsByName('myRadioGroup');
var checkedValue;
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    checkedValue = radios[i].value;
    break;
  }
}
if (checkedValue) {
  console.log('Checked radio value: ' + checkedValue);
} else {
  console.log('No radio button is checked');
}

解释：

1. 获取元素：document.getElementsByName('myRadioGroup')

   • 通过 document.getElementsByName 方法，我们可以获取所有 name 属性为 myRadioGroup 的单选按钮元素，并将其赋值给变量 radios。radios 是一个 NodeList。

2. 遍历 NodeList：

   var checkedValue;
   for (var i = 0; i < radios.length; i++) {
     if (radios[i].checked) {
       checkedValue = radios[i].value;
       break;
     }
   }
   

   • 初始化变量 checkedValue 用于存储被选中的单选按钮的值。
   • 使用 for 循环遍历 NodeList 中的每个元素，检查其 checked 状态。
   • 一旦找到被选中的单选按钮，就将其 value 属性赋值给 checkedValue，并跳出循环（break）。

3. 条件判断：if (checkedValue) { ... } else { ... }

   • 使用 if...else 语句检查 checkedValue 是否有值。
   • 如果有被选中的单选按钮，打印其 value。
   • 如果没有单选按钮被选中，打印 “No radio button is checked”。

通过这些详细的代码解释和分析，你应该能够理解如何使用原生 JavaScript 判断复选框和单选按钮的 checked 状态，并在 Web 开发中应用这些技术。

使用 jQuery

判断复选框的 checked 状态

HTML 部分

<input type="checkbox" id="myCheckbox">

这段代码创建了一个复选框，id 属性为 myCheckbox，用来唯一标识这个元素。

jQuery 部分

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    var isChecked = $('#myCheckbox').is(':checked');
    if (isChecked) {
      console.log('Checkbox is checked');
    } else {
      console.log('Checkbox is not checked');
    }
  });
</script>

分析与解释：

1. 引入 jQuery 库：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

   这段代码引入了 jQuery 库。通过引用 jQuery CDN，可以使用 jQuery 提供的简洁语法来操作 DOM。

2. 文档就绪函数：

   $(document).ready(function() {
   

   这行代码确保内部代码在 DOM 完全加载完成后才会执行。这是为了确保操作的元素已经存在于 DOM 中。

3. 获取复选框的 checked 状态：

   var isChecked = $('#myCheckbox').is(':checked');
   

   • $('#myCheckbox')：使用 jQuery 选择器获取 id 为 myCheckbox 的元素。
   • .is(':checked')：检查该元素的 checked 状态。如果复选框被选中，返回 true；否则，返回 false。

4. 条件判断：

   if (isChecked) {
     console.log('Checkbox is checked');
   } else {
     console.log('Checkbox is not checked');
   }
   

   根据 isChecked 的值，在控制台打印相应的消息。

判断单选按钮的 checked 状态

HTML 部分

<input type="radio" name="myRadioGroup" id="radio1" value="option1">
<input type="radio" name="myRadioGroup" id="radio2" value="option2">
<input type="radio" name="myRadioGroup" id="radio3" value="option3">

这段代码创建了一组单选按钮，它们共享相同的 name 属性 myRadioGroup，但 id 和 value 属性各不相同。

jQuery 部分

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    var checkedValue = $('input[name="myRadioGroup"]:checked').val();
    if (checkedValue) {
      console.log('Checked radio value: ' + checkedValue);
    } else {
      console.log('No radio button is checked');
    }
  });
</script>

分析与解释：

1. 引入 jQuery 库：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

   与上一个例子相同，引入 jQuery 库以使用其简洁的语法。

2. 文档就绪函数：

   $(document).ready(function() {
   

   确保内部代码在 DOM 完全加载完成后才会执行。

3. 获取被选中的单选按钮的值：

   var checkedValue = $('input[name="myRadioGroup"]:checked').val();
   

   • $('input[name="myRadioGroup"]')：使用 jQuery 选择器获取所有 name 属性为 myRadioGroup 的单选按钮。
   • :checked 伪类选择器：筛选出被选中的单选按钮。
   • .val()：获取被选中单选按钮的 value 属性值。如果没有任何按钮被选中，则返回 undefined。

4. 条件判断：

   if (checkedValue) {
     console.log('Checked radio value: ' + checkedValue);
   } else {
     console.log('No radio button is checked');
   }
   

   根据 checkedValue 是否有值，在控制台打印相应的消息。