在HTML表单中隐藏多个字段
hiding multiple fields in html form
HTML表单中有多个具有相同id的字段如果某个字段的值为1我想隐藏它们但它只隐藏该id的第一个字段所有其他字段都不隐藏
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Days of week</label>
<div class="col-md-9">
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="monday">Monday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="tuesday">Tuesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="wednesday">Wednesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="thursday">Thursday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="friday">Friday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="saturday">Saturday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="sunday"> Sunday
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Time</label>
<div class="col-md-3">
<select id="g" name="nod" class="form-control">
<?php
for($i=1;$i<=12;$i++){
echo"<option value='$i'>$i AM</option>";
}
for($i=1;$i<=12;$i++){
echo "<option value='12+$i'>$i PM</option>";
}?>
</select>
</div>
</div>
所有元素具有相同的id="g"。下面是javascript代码
<script type="text/javascript">
var ele=document.getElementById("st").value;
if(ele==1)
document.getElementById("g").style.visibility = "hidden";
//else
//document.getElementById("g").style.visibility = "none";
</script>
但是只有第一个元素(即文本星期几)被隐藏,所有其他元素都被显示。如何隐藏所有其他
ID在html字段中应该是唯一的,但是你可以有相同的name属性/classname。您必须循环遍历使用classname或name属性提取的元素数组。
使用name attribute
function hideGender(){
var ele=document.getElementById("st").value;
if(ele==1){
var elements=document.getElementsByName("gender");
for(var i=0;i<elements.length;i++)
elements[i].style.visibility = "hidden";
}
}
id在文档中应该是唯一的。Change id="g"
to class="g"
<label for="example-checkbox1">
<input type="checkbox" class="g" name="gender" value="saturday"> Saturday
</label>
<script type="text/javascript">
Array.filter(
document.getElementsByClassName('g'),
function(elem){
elem.style.visibility = 'hidden';
});
</script>
要选择具有相同id的多个字段,您必须使用-
$('[id="yourFieldId"]');
在你的例子中-
var ele=document.getElementById("st").value;
if(ele==1)
$('[id="yourFieldId"]').hide();
相关文章:
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 带有验证和隐藏字段值的提交按钮
- 主干窗体隐藏字段未呈现
- 清除以前的$_GET值或不获取仅隐藏字段的值
- 添加和删除隐藏字段数组中的值,而不提交表单
- 在控制器上使用“$watch”时,为什么不更新此隐藏字段
- 将选项值附加到隐藏字段
- JQuery获取隐藏字段的值
- HTML提交表单,同时包含空字段检查和按钮隐藏
- MVC+访问控制器中的隐藏字段
- 如何隐藏&使用jQuery禁用依赖于另一个字段值的字段
- ASP.net Javascript函数中的隐藏字段为null
- 在第一页加载时隐藏字段,而不是在php发布之后
- 使用JavaScript获取隐藏的Django字段
- 提交表单时,显示或识别隐藏的必填字段并将其集中
- 表单使用js、html,而不是隐藏字段
- HTML5要求隐藏文件字段-反馈位置
- 当javascript中的强制字段隐藏在条件中时,如何限制它们的验证
- 为隐藏字段隐藏jquery验证器消息
- 如何使一些字段隐藏取决于其他字段的值AngularJS, Razor, c#