验证动态补充表格

我正在填写表格并希望有一个复选框，如果选中了更多表格，这不是问题，但是当表格出现时我想验证它们，需要class=""要如何设置？验证动态补充表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Show div on check for checkbox</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    </head> 

    <body> 
    <form> 
     Check me <input name="checkbox" type="checkbox" id="checkbox" onclick="$(this).is(':checked') && $('#checked').slideDown('slow')|| $('#checked').slideUp('slow');" /> 

     <p id="checked" style="display: none; margin: 10px; height: 100px; background-color: #f5f5f5; padding: 10px" > 
     <label for="form">input?</label>   
     <input class="" type="text" name="form" id="form"> 
     </p> 

     <script> 
     $("input.checkbox").click(function() { 
      if ($(this).is(":checked")) { 
      $("input.form").addClass("required"); 
      Else 
      $("input.form").removeClass("required"); 
      } 
     }); 
     </script>  
    </form> 
    </body> 
</html>

这是我的代码，似乎没有工作，当我检查源代码之前和之后其相同。

来源

2011-12-16 Azzy

$(document).ready(function(){ 
    $('input[type="checkbox"]').change(function(){ 
     if ($(this).is(':checked')) { 
      $('#form').addClass('required'); 
     } else { 
      $('#form').removeClass('required'); 
     } 
    }); 
});

来源

2011-12-16 08:45:38 pltvs

您的代码有效。 jQuery不会直接影响源代码，而只会影响当前的文档对象模型（DOM）。如果您仍然无法得到它的工作，尝试改变你的

<script type="text/javascript" src="jquery.js"></script>

到

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

此外，保持$(document).ready(function(){});函数内部jQuery脚本标签。

来源

2011-12-16 08:52:26 Alasjo

“更多表格”我想你是指新的<input>字段，而不是新的<form> s。你的选择器input.form匹配类“form”的输入元素。这是你想要的吗？

如何以及何时扩展表单？在那个时候添加“必需”类会更好。

如果您正在寻找一种方法来设置复选框被选中时某些元素的类，请尝试这样;

$(document).ready(function() { 
    // Bind change event to all checkboxes 
    $('input[type="checkbox"]').change(function() { 
     // Set class "required" on all input elements 
     $("input").toggleClass("required", this.checked); 
    }); 
});

UPDATE

我在你的代码定睛一看，取得了较好的解决方案。

创建了一个working example，我重命名了您的元素ID，并用div而不是p标记封装了输入字段。

还将两个JavaScript部件串联到一个事件处理程序中。

$('#myCheckbox').change(function() { 

    var isChecked = this.checked; 
    var $extendedForm = $('#extendedForm'); 

    if (isChecked) $extendedForm.slideDown('slow'); 
    else $extendedForm.slideUp('slow'); 

    $extendedForm.find('input').toggleClass("required", isChecked); 
});

这个JavaScript应该在script标签被放置和$(document).ready(function(){ [CODE HERE] });

来源

2011-12-16 08:56:24 Stefan

验证动态补充表格

回答

相关问题