数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究HTML DOM Input Radio required 属性
HTML DOM input radio required 属性与 <input> 元素的 required 属性相关联。required 属性用于设置和返回在表单提交到服务器之前是否需要选中某个单选按钮。这允许表单在用户未选中具有 required 属性的单选按钮时不提交。
语法
以下是语法：
设置 required 属性。
radioObject.required = true|false
这里，true 表示必须选中单选按钮，而 false 表示在提交表单之前可以选择不选中单选按钮。
示例
让我们来看一个 input radio required 属性的示例：
<!DOCTYPE html>
<html>
<body>
<h1>Radio required property</h1>
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
FRUIT:
<input type="radio" name="fruits" id="Mango" required>Mango
<br><br>
<input type="submit">
</form>
<button type=”button” onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
function checkReq() {
var Req=document.getElementById("Mango").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The radio button must be checked before
submitting";
else
document.getElementById("Sample").innerHTML="The radio button is optional and can be
left unchecked by the user";
}
</script>
</body>
</html>输出
这将产生以下输出：
点击 CHECK 按钮：
在未选中单选按钮的情况下点击“提交”按钮：
在上面的例子中：
我们首先创建了一个 id 为“Mango”，name 为“fruits”并且 required 属性设置为 true 的 input radio 按钮。该单选按钮包含在一个表单中，该表单的 action=”Sample_page.php” 用于指定在点击提交按钮时将表单数据提交到哪里。表单还应用了内联样式：
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php"> FRUIT: <input type="radio" name="fruits" id="Mango" required>Mango <br><br> <input type="submit"> </form>
然后，我们创建了一个 CHECK 按钮，当用户点击该按钮时，将执行 checkReq() 方法。
<button type=”button” onclick="checkReq()">CHECK</button>
checkReq() 方法使用 getElementById() 方法获取类型为 radio 的 input 元素并获取其 required 属性，在我们的例子中返回 true。返回的布尔值被赋给变量 Req，并根据返回的值是 true 还是 false，我们使用其 innerHTML 属性在 id 为“Sample” 的段落中显示相应的提示信息：
function checkReq() {
var Req=document.getElementById("Mango").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The radio button must be checked before submitting";
else
document.getElementById("Sample").innerHTML="The radio button is optional and can be left unchecked by the user";
}
更新于：2021年2月15日
144 次浏览
广告