使用jquery隐藏div的所有子元素(文本字段,选择,复选框,无线电)

时间:2015-12-04 09:44:45

标签: javascript jquery html css jsp

我的jsp页面中有很少的表单元素和一个单选按钮,而div标签中有很少的其他表单元素(文本字段,文本区域,选择,复选框等)。现在我的要求是当我选择一个div标签旁边的单选按钮时隐藏div的所有子元素。

这是我的jsp代码

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
 <%@ taglib prefix="tags" uri="/struts-tags"%>
 <html>
<head>
  <link rel="stylesheet" href="jquery/jquery-ui.css">
</head>
<body>
 <tags:form name="someForm" action="someAction" method="post">
 <tags:textfield key="someActionClass.transactionDate" id="datepicker" label="Transaction Date" />
 <tags:radio list="#{'1':'One Time','2':'Recurring'}" id="tType" lable="Transaction Type" name="recurringOrOneTime"></tags:radio>


 <div class="hideTesting">
  <tags:textfield name="testingFiled" lable="testing"/>
  <tags:textfield name="testingFiled1" lable="testing"/>
 <tags:textfield name="testingFiled2" lable="testing"/>
 </div>
 <script src="jquery/external/jquery/jquery.js"></script>
 <script src="jquery/jquery-ui.js"></script>
 <script>

  $( "#datepicker" ).datepicker({
    inline: true
   });

   $("input[name='recurringOrOneTime']").change(function(){
   var checkedVal=$(this).val();
   if(checkedVal=='1')
   {
      $("input[name='testingFiled']").toggle();
      $("input[name='testingFiled']").prop("disabled", true);
    }
    else
    {
    $("input[name='testingFiled']").toggle();
    $("input[name='testingFiled']").prop("disabled", false);
    }
   });
   </script>
  </tags:form>
 </body>
 </html>

通过使用上面的代码,我可以隐藏元素,但我需要使用元素名称来隐藏/显示它。我想要做的是隐藏div标签的所有子元素,而不管它的名称或类型。有人可以建议一个简单的代码。

下面是我试图解决上述问题但没有运气的代码列表。

  Try1=>$("div").filter(":hidden").children("input[type='text']").attr("disabled", "disabled");
     Try2=>$("input,select,textarea", $(".hideTesting")).attr("disabled", "disabled");
    Try3=>$("input,select,textarea", $(".hideTesting")).toggle();
    Try4=> $("input",$(".hideTesting")).toggle();
    Try5=>$(".hideTesting").children("input[type='text']").toggle();

    Try6=>$("div.testingFiled").find('input').toggle();

2 个答案:

答案 0 :(得分:1)

请这样说:

$("input:radio").click(function () {
  $(".hideTesting").hide();
});

答案 1 :(得分:0)

使用此代码:

$("#tType").click(function () {
  $(".hideTesting").hide();
});