形式与js,html,首先不是隐藏的字段

时间:2016-05-03 12:07:06

标签: javascript jquery html forms

我的字段有问题, 码 HTML

<span id="sudaner">
  <input type="radio" name="traveledis" checked value="0" >No
  <input type="radio" name="traveledis" value="1" />Yes
</span>

<div id="sudandetails">`

这是js代码

$("#sudaner input[type='radio']").click(function(){
    if($(this).attr("value")=="1"){
        $("#sudandetails").css("display","block");
        $("#countries").prop('required',true);
        $("#bcfrom").prop('required',true);
        $("#bcto").prop('required',true);
        $("#country_reason").prop('required',true);
    }
    else {
        $("#countries").prop('required',false);
        $("#countries").val("");
        $("#bcfrom").prop('required',false);
        $("#bcfrom").val("");
        $("#bcto").prop('required',false);
        $("#bcto").val("");
        $("#country_reason").prop('required',false);
        $("#country_reason").val("");
        $("#sudandetails").css("display","none");
    }
});

我已经'检查''NO'中处于活动状态但是当我转到表单时,我看到默认情况下'否'但是这些字段最初并未隐藏。我需要通过'是'再次移动选择'否'并隐藏字段或在“否”中单击2次并隐藏字段。所以我不明白为什么这个领域最初没有隐藏。

感谢您的帮助

2 个答案:

答案 0 :(得分:0)

你最初需要隐藏这个div。在你的脚本中添加这一行

$("#sudandetails").hide();

您可以在点击时绑定事件,并在页面加载点击事件时触发。

答案 1 :(得分:0)

我为你做了一个小提琴,并将ready函数与click函数组合在一个自己的处理程序中。您不仅可以检查值on click,因为如果文档被加载则没有单击,所以没有任何反应。

https://jsfiddle.net/ww582Lj9/

function myHandler(e) {
    if($(this).attr("value")=="1"){
          $("#sudandetails").css("display","block");
          $("#countries").prop('required',true);
          $("#bcfrom").prop('required',true);
          $("#bcto").prop('required',true);
          $("#country_reason").prop('required',true);
      }
      else {
          $("#countries").prop('required',false);
          $("#countries").val("");
          $("#bcfrom").prop('required',false);
          $("#bcfrom").val("");
          $("#bcto").prop('required',false);
          $("#bcto").val("");
          $("#country_reason").prop('required',false);
          $("#country_reason").val("");
          $("#sudandetails").css("display","none");
      }
}

$(document).ready(myHandler);
$("#sudaner input[type='radio']").on("click", myHandler);