javascript - 通过复选框javascript切换必填字段
问题描述
我已经搜索了这个问题一段时间,这就是我想出的,但它不起作用:
<form action="Subscription.php" method="post">
<label>field1<a style="color:red">*</a></label>
<input type="text" id="field1" name="field1" pattern="^[A-Za-z -]+$" required>
<input type="checkbox" name="checkbox1" onclick="showMe('more'); togglerequirement();">Do you want more?
<div id="more" style="display:none">
<label>field2<a style="color:red">*</a></label>
<input type="text" id="field2" name="field2" pattern="^[A-Za-z -]+$">
</div>
<input type="submit" value="Invia richiesta di registrazione" class="btn" </form>
<script type="text/javascript">
function showMe (box) {
var chboxs = document.getElementsByName("more");
var vis = "none";
if(chboxs[0].checked) {
vis = "block";
}
document.getElementById(box).style.display = vis;
}
function togglerequirement(){
var checkbox = document.getElementsByName("more");
var field2= document.getElementsByid("field2");
if(checkbox[0].checked){
field2.setAttribute("required", "");
}else{
field2.removeAttribute("required");
}
}
</script>
在你说什么之前,我已经尝试过 fiedl2.required; 无论如何它都不起作用。
我能做些什么?
解决方案
您正试图找到一个名为“more”的复选框,但它的 name="checkbox1":
<input type="checkbox" name="checkbox1" onclick="showMe('more'); togglerequirement();">
它工作正常,但是它在显示时将第二个字段更改为必需,而在隐藏时将其更改为不需要。所以你没有看到任何效果。
这里需要。
如果我完全理解你,试试这个:
<form action="Subscription.php" method="post">
<label>field1<a style="color:red">*</a></label>
<input type="text" id="field1" name="field1" pattern="^[A-Za-z -]+$" required>
<input type="checkbox" name="more" onclick="showMe('more'); togglerequirement();">Do you want more?
<div id="more" style="display:none">
<label>field2<a style="color:red">*</a></label>
<input type="text" id="field2" name="field2" pattern="^[A-Za-z -]+$">
</div>
<input type="submit" value="Invia richiesta di registrazione" class="btn" </form>
<script type="text/javascript">
function showMe (box) {
var chboxs = document.getElementsByName("more");
var vis = "none";
if(chboxs[0].checked) {
vis = "block";
}
document.getElementById(box).style.display = vis;
}
function togglerequirement(){
var checkbox = document.getElementsByName("more");
var field2 = document.getElementById("field2");
if(checkbox[0].checked){
field2.setAttribute("required", "");
}else{
field2.removeAttribute("required");
}
}
</script>
推荐阅读
- excel - ActiveWorkbook.Close 在 Excel 365 中无法正常工作
- yaml - CloudFormation ImportValue、Join 和 Ref 中的链函数
- jquery - 减少滚动时的射击以获得更好的性能?
- java - 如何使 BigDecimal 除法更精确
- c# - 如果打开任务管理器,来自 user32.dll 的 SendInput 函数将不起作用
- highcharts - Highchart 饼图颜色没有变化
- python - python manage.py runserver 无法在 localhost:8000 上运行
- raspberry-pi - 接近树莓派的gpio寄存器地址,为什么unsigned int*和char*的结果不一样?
- java - Java JOOQ 多表查询
- oauth - WSO2-IS 5.10.0 - 服务提供者 - OAuthAdminServiceIdentityOAuthAdminException