以html格式隐藏多个字段

-1

我在HTML表单中有多个具有相同id的字段，如果特定字段的值为1但我只隐藏它们，但它只隐藏该ID的第一个字段，所有其他字段都不隐藏以html格式隐藏多个字段

<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>

但只有第一个元素（即一周的文天）获取隐藏所有其他显示。我如何隐藏所有其他人

来源

2015-07-20 Legendary_Hunter

*所有的元素具有相同的ID = “G” *。 HTML不允许。 http://validator.w3.org/nu/可能会有帮助。 – Quentin

检查此页面应该只有一个具有特定ID的元素，他们不应该重复http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-不同类型 –

同意。一个HTML文档不能有多个具有相同ID的单个元素。这就是为什么Javascript只找到第一个元素，然后停下来的原因。改为使用类和'getElementsByClassName'。 –

-1

ID在文档中应该是唯一的。将id="g"更改为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>

来源

2015-07-20 12:29:45

-2

要选择具有相同ID的多个字段，你将不得不使用 -

$('[id="yourFieldId"]');

所以你的情况 -

var ele=document.getElementById("st").value; 
if(ele==1) 
    $('[id="yourFieldId"]').hide();

来源

2015-07-20 12:30:04 Waqar

是什么？这是行不通的。和非常糟糕的做法一个ID的整点是独一无二的简单地使用一个类，而不是整个类的点 –

我同意这是不好的做法，但jquery会工作，尽管原来的问题没有提到jquery – depperm

@乔什史蒂文斯我已经试过了，它的工作原理。你的观点是绝对正确的，你应该使用一个班级来选择多个领域。但他的要求是与id，所以解决方案适合。 – Waqar

ID应该是在HTML领域独一无二的，但你可以具有相同的名称属性/类名。您必须遍历使用classname或name属性提取的元素数组。通过固定是开始 -

在你的情况下使用name属性

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"; 
    } 
}

来源

2015-07-20 12:42:00 KDP

'elements [i] .. style.visibility =“hidden”;'需要修复1点 –

是的谢谢。修正 – KDP

以html格式隐藏多个字段

回答

相关问题