<html>
<head>
<title>test</title>
<script>
function onsubmitTest() {
var flage = false;
var radios = document.forms[0].radio1;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
flage = true;
alert("选择了第" + i + "个单选按钮");
return true;
}
}
if (!flage) {
alert("一个单选按钮都没有选择！");
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="get" action="#" onsubmit='onsubmitTest();'>
<input type="radio" name="radio1" value="1" id="radio1"><label for='radio1'>单选按钮一</label>
<input type="radio" name="radio1" value="2" id="radio2"><label for='radio2'>单选按钮二</label>
<input type="radio" name="radio1" value="3" id="radio3"><label for='radio3'>单选按钮三</label>
<input type="submit" />
</form>
</body>
</html>
修改以后
<html>
<head>
<title>test</title>
<script>
function onsubmitTest() {
var flage = false;
var radios = document.forms[0].radio1;
// 没有单选按钮的情况
if (typeof radios == 'undefined') {
alert("一个单选按钮都没有！");
}
// 只有一个单选按钮的情况
if (typeof radios.length == 'undefined') {
alert("只有一个单选按钮。");
if (document.forms[0].radio1.checked == true) {
alert("只有一个按钮，已选中");
return true;
} else {
alert("只有一个按钮，没有选中");
return false;
}
} else { // 多于一个单选按钮的情况
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
flage = true;
alert("选择了第" + (parseInt(i) + 1) + "个单选按钮");
return true;
}
}
}
if (!flage) {
alert("一个单选按钮都没有被选中！");
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="get" action="#" onsubmit='onsubmitTest();'>
<input type="radio" name="radio1" value="1" id="radio1"><label for='radio1'>单选按钮一</label>
<input type="radio" name="radio1" value="2" id="radio2"><label for='radio2'>单选按钮二</label>
<input type="radio" name="radio1" value="3" id="radio3"><label for='radio3'>单选按钮三</label>
<input type="submit" />
</form>
</body>
</html>
分享到：
相关推荐
除了获取选中项的值，我们还可能需要判断用户是否选择了单选按钮组中的任何选项。这可以通过修改上述代码来实现： ```javascript var group = document.getElementsByName('RadioGroup1'); var isChecked = false; ...
JavaScript 调用单选按钮的方法和实例说明 在 HTML 表单中，单选按钮（Radio Button）是一种常用的表单元素，用于让用户在多个选项中选择一个。JavaScript 可以用于控制单选按钮的行为，例如选择某个单选按钮、获取...
if (/* 判断是否需要保持选中状态 */) { document.getElementById('radio1').checked = true; } else { document.getElementById('radio1').checked = false; } }); ``` 4. **CSS样式**：除了功能实现，我们还...
在JavaScript中，处理单选按钮（radio button）的选中状态和判断对象是否为空是常见的需求，尤其是在构建交互丰富的Web应用时。以下将详细介绍如何实现这两个功能。 首先，让我们来看看如何取消单选按钮的选中状态...
3. **JavaScript逻辑**：在`js`文件中，可能包含了处理单选按钮状态改变、动画效果和事件响应的JavaScript代码。Vue.js的响应式系统允许开发者轻松地跟踪数据变化，并更新视图。此外，Vue的指令（如`v-model`）和...
为了在JavaScript中获取这些单选按钮的值，我们可以编写一个函数，比如`getValue()`，该函数遍历所有单选按钮，并检查哪些按钮被选中。当选中按钮被找到时，该按钮的值可以被读取并赋值给一个变量。下面是一个实现该...
js控制单选按钮(radio)的取消与选中，javascript单选按钮
通过`.checked`属性可以检查某个单选按钮是否被选中。如果被选中，则返回`true`；否则返回`false`。 ```javascript if (radios[i].checked) { // 如果当前单选按钮被选中... } ``` ### 2. 向Action中传递多个参数...
- `&& e[i].checked` 判断单选按钮是否被选中。 6. **赋值**：如果以上条件都满足，则将当前单选按钮的值赋给`item_Id1`。 7. **返回结果**：最后返回`item_Id1`，即选中的单选按钮的值。 #### 优化建议 虽然...
本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第...单选按钮取消选中的三种方式</title> [removed] [removed] [removed] $(function(){ // v
一组单选按钮name都为country 代码如下: var country = document.getElementsByName(‘country’); for(var i=0;i<country.length;i++){ if(country[i].checked) { country[i].checked=false; //不选中 } }
在网页设计中，实现表格中的单选按钮功能是一项常见的需求，尤其在数据展示或用户选择操作时。"表格实现单选按钮"这个标题所指的知识点主要是如何在HTML表格（`<table>`）中集成单选按钮（`<input type="radio">`）...
在编程和用户界面设计中，单选按钮（Radio Button）是一种常见的交互元素，它允许用户在多个选项中选择一个。本教程将详细讲解如何创建一个简单的单选按钮系统，仅用两个按钮就能实现这一功能。这非常适合初学者，...
本篇文章将详细探讨如何利用JavaScript（JS）来实现GridView中的单选按钮功能。 首先，我们需要理解GridView的基本结构。GridView控件通常通过绑定数据源（如数据库查询结果）来填充其行和列。默认情况下，GridView...
在网页设计中，单选按钮（Radio Button）和复选框（Checkbox）是常见的交互元素，用于用户在多个选项中做出选择。随着技术的发展，CSS3的引入为这些基础元素的美化提供了更多可能性。"CSS3单选按钮和复选按钮特效....
在复选框和单选按钮的选中状态改变时，JavaScript可以通过监听`change`事件来触发相应的动画。这可能涉及到修改SVG路径的`d`属性，从而改变绘制路径，或者调整其他SVG元素的属性，如`stroke-dasharray`和`stroke-...
在设计上，单选按钮通常表现为一个圆圈，未选中时为空心，选中时为实心。 2. 响应事件：单选按钮的常见事件包括点击事件（click）和状态改变事件（change）。当用户点击单选按钮时，系统会触发点击事件；如果选中...
在JavaScript和jQuery中，操作HTML页面上的单选按钮（radio）是常见的需求，尤其是在表单处理和用户交互中。本文将详细介绍如何使用jQuery判断radio单选框是否选中以及如何获取其值。 首先，让我们来看如何设置单选...
总之，“jQuery单选多选按钮选中美化特效”是一个利用jQuery和CSS3技术优化用户界面的例子，它展示了如何通过简单的代码实现复杂的效果，提高网页的互动性和美观性。开发者可以根据自己的需求进行定制，将其融入到...
这通常需要JavaScript来动态改变伪元素的样式，当单选按钮被选中时。 ```css .radio-label:before { content: ""; display: block; width: 8px; height: 8px; background-color: #333; border-radius: 50%; ...