Question

好吧，在过去的3个小时中，我一直努力使自己处于“ BATTY”状态，以期找出答案。我在页面上有2种名称不同的表格。我试图用2组按钮来选择/取消选择该特定形式的所有复选框，但无济于事。我已经尝试过使用纯JS和jQuery在这里和其他地方找到无数次迭代。请在我失去一点点理智之前帮忙：）

我遇到的一个大问题是，复选框的ID和名称是代码生成的（例如<td><input type='checkbox' name=\"arIPInfo[$ID]\" id=\"IP$ID\" checked></td>\n</tr>，其中$ ID是数据库返回的值）ID不必一定是ID，因为名称是使用此数据的其他功能。如果该ID可以是静态的，则对表格2的所有复选框说ID =“ IP”，对于表格1的说ID =“ Jacks”也可以。

就目前的情况而言，jQuery和链接是从StackOverflow上的一个工作示例粘贴的，该示例在JSFiddle上运行良好，但在这里不行。我有jQuery 3.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>

我尝试过的另一个jQuery ：（请注意，此函数中有2个）

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

Answer 1

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

由于HTML毫无保留地显示出无效的结构，过时的属性，缺少的结束标记等，因此我将其简化为一个简单的示例，以表明您确实非常接近实现所需的目标：

function toggleCheck(state, elem) {
  jQuery(elem).closest("form").find("input:checkbox").prop('checked', state);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<FORM NAME="frmJacks" ACTION='' METHOD='POST'>
  frmJacks
  <br/>
  <INPUT TYPE="CHECKBOX" ID="acheck" NAME="TEST" />
  <INPUT TYPE="CHECKBOX" ID="acheck2" NAME="TEST" />
  <INPUT TYPE="CHECKBOX" ID="acheck3" NAME="TEST" />
  <br/>
  <a href="#" onclick="javascript:toggleCheck(true,this);" class="btn">Select All</a>&nbsp;
  <a href="#" onclick="javascript:toggleCheck(false,this);" class="btn">Deselect All</a>
</FORM>
<hr/>
<FORM NAME="frmIPs" ACTION='ips.php' METHOD='POST' ID='tempe'>
  frmIPs
  <INPUT TYPE="CHECKBOX" ID="bcheck" NAME="TEST" />
  <INPUT TYPE="CHECKBOX" ID="bcheck2" NAME="TEST" />
  <INPUT TYPE="CHECKBOX" ID="bcheck3" NAME="TEST" />
  <br/>
  <a href="#" onclick="javascript:toggleCheck(true,this);" class="btn">Select All</a>&nbsp;
  <a href="#" onclick="javascript:toggleCheck(false,this);" class="btn">Deselect All</a>
</FORM>

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

1 个答案: