php使用javascript处理多个复选框选择

标签 php javascript checkbox

我正在创建一个包含多个同名复选框的表单。我已经包含了一个选项,供用户选择父复选框以选中所有子项。下面的 javascript 代码用于选择或取消选择所有复选框。

function checkAll(field)
{
  i = 0;
  if(field[i].checked)
  {
    uncheckAll(field);
  }
  else
  {
    for (i = 0; i < field.length; i++)
      field[i].checked = true ;
  }
}

function uncheckAll(field)
{
  for (i = 0; i < field.length; i++)
  field[i].checked = false ;
}

基本上我想做的是处理选择,当提交表单时,通过获取使用 $_POST 选择的子复选框并进行数据库查询,但为了让所有具有相同名称的子复选框出现在数组中的 $_POST 中,它们需要附加方括号,不幸的是,javascript 不支持它。

<div class ="county-select">
    <div><label for="franklin">Franklin County</label><input name="county[]" value="franklin" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townF)" /></div>
    <div><label for="oxford">Oxford Hills</label><input name="county[]" value="oxford" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townO)" />  </div>
    <div><label for="river-valley">River Valley</label><input name="county[]" value="river-valley" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townR)" /></div>
    <div><label for="city">City</label><input name="county[]" value="city" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townC)" /></div> 
  </div>
    </div>
<div class="town-select"> 
  <div id="Franklin-county">
    <label for="avon">Avon</label><input name="townF" value="avon" type="checkbox" class="noBorderIE" /><br/>
    <label for="CV">Carrabassett Valley</label><input name="townF" value="carrabassett valley" type="checkbox" class="noBorderIE" /><br/>
    <label for="carthage">Carthage</label><input name="townF" value="carthage" type="checkbox" class="noBorderIE" /><br/>
    <label for="chesterville">Chesterville</label><input name="townF" value="chesterville" type="checkbox" class="noBorderIE" /><br/>
    <label for="CP">Coplin Plantation</label><input name="townF" value="coplin plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="DP">Dallas Plantation</label><input name="townF" value="dallas plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="eustis">Eustis</label><input name="townF" value="eustis" type="checkbox" class="noBorderIE" /><br/>

    <label for="farmington">Farmington</label><input name="townF" value="farmington" type="checkbox" class="noBorderIE" /><br/>
    <label for="fayette">Fayette</label><input name="townF" value="fayette" type="checkbox" class="noBorderIE" /><br/>
    <label for="FT">Freeman township</label><input name="townF" value="freeman township" type="checkbox" class="noBorderIE" /><br/>
    <label for="industry">Industry</label><input name="townF" value="industry" type="checkbox" class="noBorderIE" /><br/>
    <label for="jay">Jay</label><input name="townF" value="jay" type="checkbox" class="noBorderIE" /><br/>
    <label for="kingfield">Kingfield</label><input name="townF" value="kingfield" type="checkbox" class="noBorderIE" /><br/>
    <label for="livermore">Livermore</label><input name="townF" value="livermore" type="checkbox" class="noBorderIE" /><br/>
    <label for="LF">Livermore Falls</label><input name="townF" value="livermore falls" type="checkbox" class="noBorderIE" /><br/>

    <label for="MT">Madrid township</label><input name="townF" value="madrid township" type="checkbox" class="noBorderIE" /><br/>
    <label for="MV">Mount Vernon</label><input name="townF" value="mount vernon" type="checkbox" class="noBorderIE" /><br/>
    <label for="NS">New Sharon</label><input name="townF" value="new sharon" type="checkbox" class="noBorderIE" /><br/>
    <label for="NV">New Vineyard</label><input name="townF" value="new vineyard" type="checkbox" class="noBorderIE" /><br/>
    <label for="PT">Perkins township</label><input name="townF" value="perkins township" type="checkbox" class="noBorderIE" /><br/>
    <label for="phillips">Phillips</label><input name="townF" value="phillips" type="checkbox" class="noBorderIE" /><br/>
    <label for="rangeley">Rangeley</label><input name="townF" value="rangeley" type="checkbox" class="noBorderIE" /><br/>
    <label for="RP">Rangeley Plantation</label><input name="townF" value="rangeley plantation" type="checkbox" class="noBorderIE" /><br/>

    <label for="readfield">Readfield</label><input name="townF" value="readfield" type="checkbox" class="noBorderIE" /><br/>
    <label for="SRP">Sandy River Plantation</label><input name="townF" value="sandy river plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="strong">Strong</label><input name="townF" value="strong" type="checkbox" class="noBorderIE" /><br/>
    <label for="temple">Temple</label><input name="townF" value="temple" type="checkbox" class="noBorderIE" /><br/>
    <label for="vienna">Vienna</label><input name="townF" value="vienna" type="checkbox" class="noBorderIE" /><br/>
    <label for="weld">Weld</label><input name="townF" value="weld" type="checkbox" class="noBorderIE" /><br/>
    <label for="wilton">Wilton</label><input name="townF" value="wilton" type="checkbox" class="noBorderIE" /><br/>

  </div>

有人知道解决这个问题的方法吗? ..很抱歉,顺便说一句

最佳答案

在Javascript中只要放在字符串中就可以使用括号。我在下面使用您的代码对此进行了测试,看起来它应该可以满足您的需要。

JavaScript 代码:

<script type="text/javascript">
function checkAll(parent, field)
{
    var children = document.getElementsByName(field);
    var newValue = parent.checked;
    for (i = 0; i < children.length; i++){
        children[i].checked = newValue;
    }
}
</script>

HTML 内容片段:

<div class ="county-select">
  <div><label for="franklin">Franklin County</label><input name="county[]" value="franklin" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townF[]')" /></div>
  <div><label for="oxford">Oxford Hills</label><input name="county[]" value="oxford" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townO[]')" />  </div>
  <div><label for="river-valley">River Valley</label><input name="county[]" value="river-valley" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townR[]')" /></div>
  <div><label for="city">City</label><input name="county[]" value="city" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townC[]')" /></div> 
</div>
<div class="town-select">
    <div id="Franklin-county">
    <label for="avon">Avon</label><input name="townF[]" value="avon" type="checkbox" class="noBorderIE" /><br/>
    <label for="CV">Carrabassett Valley</label><input name="townF[]" value="carrabassett valley" type="checkbox" class="noBorderIE" /><br/>
    <label for="carthage">Carthage</label><input name="townF[]" value="carthage" type="checkbox" class="noBorderIE" /><br/>
    <label for="chesterville">Chesterville</label><input name="townF[]" value="chesterville" type="checkbox" class="noBorderIE" /><br/>
    <label for="CP">Coplin Plantation</label><input name="townF[]" value="coplin plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="DP">Dallas Plantation</label><input name="townF[]" value="dallas plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="eustis">Eustis</label><input name="townF[]" value="eustis" type="checkbox" class="noBorderIE" /><br/>
  </div>
</div>

关于php使用javascript处理多个复选框选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6795523/

相关文章:

php - 使用带有多个参数的 yii\rest\UrlRule 的 Yii2 路由

php - Roundcube 安装,出现 MYSQL_ATTR_FOUND_ROWS fatal error

php - 使用 javaScript 从 PHP 读取 Json

javascript - Prop 类型失败 : Invalid prop 'value' of type 'object' supplied to 'TextInput'

php - 如何从cgridview 中获取复选框的值?

php - 重定向以重命名远程图像以绕过广告拦截

Javascript service worker : Fetch resource from cache, 但也更新了它

JavaScript onLoad 函数 + IE = 问题

javascript - 如何创建至少有 1 个框处于事件状态的复选框列表

javascript - 如何使用 jQuery 选择所有复选框?