Javascript选择框选择全部功能

我试图在按钮上添加“选择所有”功能，但jquery.min文件有问题

我在header.php页面上有这些

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

我使用这些代码来选择所有函数

   <script type="text/javascript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

当我删除header.php上的javascript包含并将这些包含添加到anket.php上时，选择所有的框，这件事是可行的，但其他事情不是，我们使用jquery做一些事情。我需要让这两种方法都起作用

这是我的html

<table class="table table-bordered table-check">
                        <thead>
                            <tr>
                                <th><input type="checkbox" onClick="toggle(this)" class="styled"></th>
                                <th align="center">Soru</th>
                                <th align="center">Durum</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="foo" class="styled" /></td>
                                <td align="center">Aylık kazancınız nedir?</td>
                                <td align="center">Aktif</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="foo" class="styled" /></td>
                               <td align="center">Cinsiyetiniz nedir?</td>
                               <td align="center">Pasif</td>
                            </tr>


                        </tbody>
                    </table>

谢谢。

您可以试试这个：

html

---

请用HTML。奇怪的是，您正在加载jQuery，但没有使用它们。您的代码可以正常工作

<table class="table table-bordered table-check">
  <thead>
    <tr>
      <th>
        <input type="checkbox" class="styled" id="allChk" />
      </th>
      <th align="center">Soru</th>
      <th align="center">Durum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="foo" class="styled" />
      </td>
      <td align="center">Aylık kazancınız nedir?</td>
      <td align="center">Aktif</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="foo" class="styled" />
      </td>
      <td align="center">Cinsiyetiniz nedir?</td>
      <td align="center">Pasif</td>
    </tr>
  </tbody>
</table>

$(function(){
    $("#allChk").on('change', function(){
        $("input[name=foo]:checkbox").prop('checked', $(this).prop('checked'));
    });

    $("input[name=foo]:checkbox").on('change', function(){
        $("#allChk").prop('checked', 0 === $("input[name=foo]:not(:checked)").length);
    });
})