html 多选时 至少要填写一个选项怎么写?

html 多选时 至少要填写一个选项怎么写?,第1张

您可以使用 HTML5 中的 `required` 属性和 `min` 属性来实现这个需求。将 `required` 属性添加到您的多选表单中的每个选项上,然后将 `min` 属性设置为1,就可以实现至少选择一个选项的需求。

以下是示例代码:

```html

<form>

<fieldset>

<legend>请选择至少一个选项:</legend>

<input type="checkbox" id="option1" name="option1" value="option1" required>

<label for="option1">选项1</label>

<br>

<input type="checkbox" id="option2" name="option2" value="option2" required>

<label for="option2">选项2</label>

<br>

<input type="checkbox" id="option3" name="option3" value="option3" required>

<label for="option3">选项3</label>

<br>

<input type="checkbox" id="option4" name="option4" value="option4" required>

<label for="option4">选项4</label>

<br>

</fieldset>

<br>

<input type="submit" value="提交">

</form>

```

在这个示例中,每个选项都带有 `required` 属性来确保至少选择一个选项,同时 `min` 属性被设置为 1,以确保至少选择一个选项。

希望这可以帮助您实现所需的功能。

var arr = [1,2,3,4,5,6,7,8,9,10]

var result = new Array(3)

for(var i = 0 i < result.length i++){

    result[i] = arr.splice(Math.random()*arr.length>>>0, 1)[0]

}

console.info(result)

select标记有一个属性multiple,将其设置成multiple="multiple"按住Ctrl键即可实现多选。 请看例子:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

</head>

<script language="javascript">

function getValue()

{

var s = ""

for(var i=0i<form1.ss.options.lengthi++)

{

if(form1.ss.options[i].selected)

{

s+=form1.ss.options[i].value

}

}

alert(s)

}

</script>

<body>

<form id="form1" name="form1" method="post" action="">

请选择:

<select id="ss" name="ss" size="5" multiple="multiple">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

</select>

<br>

<input type="button" name="Submit" value="提交" onclick="getValue()" />

</form>

</body>

</html>

**************************补充**********************

修改select标签的size属性,把它的值改为1即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8311891.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存