Javascript 选中页面上有多个表单的表单中的所有复选框_Javascript_Jquery

Javascript 选中页面上有多个表单的表单中的所有复选框

javascript jquery

Javascript 选中页面上有多个表单的表单中的所有复选框,javascript,jquery,Javascript,Jquery,好吧，我在过去的3个小时里一直在努力解决这个问题。我有两张不同名字的表格。我尝试使用两组按钮来选择/取消选择该特定表单中的所有复选框，但没有效果。我使用纯JS和jQuery在这里和其他地方进行了多次迭代。在我失去一点理智之前，请帮助我：我遇到的一个大问题是复选框的ID和名称是由代码生成的，例如，.\n其中$ID是数据库返回值，ID不必是，因为名称是使用此数据的其他函数的关键部分。如果ID可以是静态的，那么对于表单2的所有复选框，ID=IP，对于表单1，ID=Jacks，也可以现在，jQuer

好吧，我在过去的3个小时里一直在努力解决这个问题。我有两张不同名字的表格。我尝试使用两组按钮来选择/取消选择该特定表单中的所有复选框，但没有效果。我使用纯JS和jQuery在这里和其他地方进行了多次迭代。在我失去一点理智之前，请帮助我：

我遇到的一个大问题是复选框的ID和名称是由代码生成的，例如，.\n其中$ID是数据库返回值，ID不必是，因为名称是使用此数据的其他函数的关键部分。如果ID可以是静态的，那么对于表单2的所有复选框，ID=IP，对于表单1，ID=Jacks，也可以

现在，jQuery和链接是从StackOverflow上的一个工作示例粘贴而来的，该示例在JSFIDLE上运行良好，但在这里没有。我有jquery3.3.1 slim

 <SCRIPT>
 function toggleCheck(state,elem) {
    jQuery(elem).closest("form").find("input:checkbox").prop('checked', state);
 }
 </SCRIPT>
<BODY>
<TABLE BORDER='1'>
    <TR>
            <TD CLASS='center'><H3>Jacks containing "<?php echo $_POST['SearchFor'];?>"</H3></TD>
    </TR>
    <FORM NAME="frmJacks" ACTION='' METHOD='POST'>
    <INPUT TYPE="HIDDEN" NAME="SearchOn" VALUE="JackList">
    <TR>
            <TD CLASS='center'><TABLE BORDER='1' CELLPADDING = '3'><?php echo getSearchResults('Jacks');?></TABLE></TD>
    </TR>
    <TR><TD><INPUT TYPE="CHECKBOX" ID="acheck" NAME="TEST">
    </FORM>

    <TR>
            <TD CLASS='center'><H3>IPs containing "<?php echo $_POST['SearchFor'];?>"</H3></TD>
    </TR>
    <FORM NAME="frmIPs" ACTION='ips.php' METHOD='POST' ID='tempe'>
    <INPUT TYPE="HIDDEN" NAME="SearchOn" VALUE="IPList">
    <TR>     
            <TD CLASS='center'><TABLE BORDER='1' CELLPADDING = '3'><?php echo getSearchResults('IPs');?>
            <TD CLASS='center' COLSPAN=8><BUTTON TYPE="submit">Edit Selected</BUTTON></TD>
    </TR>
    <TR>
            <TD ALIGN='right' COLSPAN=8><a id="check" href="#" onclick="javascript:toggleCheck(true,this);" class="btn">Select All</a>&nbsp;<a id="uncheck" href="#" onclick="javascript:toggleCheck(false,this);" class="btn">Deselect All</a></TD>
    </TR>
    </TABLE></TD>
    </TR> 
    </FORM>      
    </TABLE>

如果您的HTML实际上在每个表单中包含一组复选框和按钮，那么您已经拥有的简单的toggleCheck函数将不会有问题

由于您的HTML是无效结构、过时属性、缺少结束标记等的绝对恐怖的展示，因此我将其简化为一个简单的示例，以证明您真的非常接近实现您想要的：

功能切换检查状态，元素{ jquerylem.closestform.findinput:checkbox.prop'checked'，state； } frmJacks frmIPs

上面的示例HTML甚至不包含两组按钮，只有第二个表单有任何或两组复选框，只有第一个表单有任何复选框，而jQuery示例在使用选择器方面似乎与HTML没有任何关系。你只是从其他地方随机粘贴它们，而不知道它们是做什么的吗？你了解选择器的用途吗？现在还不清楚到底发生了什么，你到底尝试了什么。试着给我们举一个例子，我们有一些机会实际重现这个问题。顺便说一句，如果你放置了第二组按钮，你的toggleCheck功能看起来应该可以正常工作。而且你的HTML在技术上是无效的，尽管大多数浏览器可能会原谅你。除了tbody、thead或tr元素之外，您不应该将任何内容作为table元素的子元素。严格来说，不允许将表单元素直接放在表下面。您似乎还试图使用表来控制布局，这种布局在2005年左右过时，当时浏览器在呈现方面开始变得更强大-div和CSS为您提供了更大的灵活性和更正确的语义-表用于表示表格数据，没有设置定位。@ADyson我只有一组链接作为测试，因为它在JSFIDLE的示例中起作用，并且尝试添加第二组链接，但没有成功。我已经尽了最大的努力去理解它，但是jQuery对我来说是新的。我在2008年左右写过这篇文章，但对过时的浏览器版本有一些严格的限制。它正在经历一次完全的重写，但还远未完成。@ADyson这适用于页面上的所有函数，因此我尝试在一些测试中对其进行破解$document.readyfunction{$'check-all'。单击函数{$input:checkbox.attr'checked'，true；}；$'uncheck-all'。单击函数{$input:checkbox.attr'checked'，false；}；}；哦，普通的，缓和的恐怖节目，没那么糟糕吧？好吧，我承认，哈哈。我已经测试了你的例子，效果很好。然后我回去把所有的表格元素和我的作品都去掉了。显然，我的噩梦是让DOMS/jQuery/JavaScript消化不良。我想我会对这些页面的格式打1分。谢谢你的帮助。一个问题，class=btn做什么？这是JSFIDLE上预定义的CSS样式吗？它没有任何特殊功能。它在我为按钮从原始HTML复制的标记中。我以为你用它来设计你的元素。啊，好吧，我觉得这是一个超级花哨的东西，而不是CSS。再次感谢你的帮助。我已经重新安排了我的物品，似乎已经消除了偏头痛。没问题。我想这可能是因为缺少了结尾标签而窒息，但这其实并不重要，只要你把一切都弄清楚。

$(document).ready(function() {
  $('#check-all').click(function(){
    $("#tempe").find("input:checkbox").prop('checked', true);
  });
  $('#uncheck-all').click(function(){
    $('form[name="myFormName"]').prop('checked', false);
  });
});