---
description: https://codepen.io/bhargavmehta/pen/Zpzddv
---

# \[DATATABLE] Datatable multiple checkbox demo (ok)

C:\xampp\htdocs\wpclidemo\index.php

```php
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodePen - Datatable multiple checkbox demo</title>
</head>
<body translate="no">
  <link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css">
  <link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css">
  <link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table_jui.css">
  <link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css">
  <link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css">
  <script src="https://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery@2.0.3"></script>
  <script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <div id="dt_wrapper" class="dataTables_wrapper no-footer">
    <div class="dataTables_length" id="dt_length">
      <label>Show <select name="dt_length" aria-controls="dt" class="">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select> entries
      </label>
    </div>
    <div id="dt_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="dt"></label></div>
    <table id="dt" class="dataTable no-footer" role="grid" aria-describedby="dt_info" style="width: 1906px;">
      <thead>
        <tr role="row">
          <td class="sorting_asc" tabindex="0" aria-controls="dt" rowspan="1" colspan="1" aria-sort="ascending" aria-label="type: activate to sort column descending" style="width: 556px;">type</td>
          <td class="sorting" tabindex="0" aria-controls="dt" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 951px;">Description</td>
          <td class="sorting" tabindex="0" aria-controls="dt" rowspan="1" colspan="1" aria-label="Free: activate to sort column ascending" style="width: 339px;">Free</td>
        </tr>
      </thead>
      <tbody>
        <tr role="row" class="odd">
          <td class="sorting_1">A</td>
          <td>basic stuff</td>
          <td>1</td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">CNAME</td>
          <td>complicated stuff</td>
          <td>1</td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">MX</td>
          <td>some stuff</td>
          <td>0</td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">MX</td>
          <td>more stuff</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
    <div class="dataTables_info" id="dt_info" role="status" aria-live="polite">Showing 1 to 4 of 4 entries</div>
    <div class="dataTables_paginate paging_simple_numbers" id="dt_paginate"><a class="paginate_button previous disabled" aria-controls="dt" data-dt-idx="0" tabindex="0" id="dt_previous">Previous</a><span><a class="paginate_button current" aria-controls="dt" data-dt-idx="1" tabindex="0">1</a></span><a class="paginate_button next disabled" aria-controls="dt" data-dt-idx="2" tabindex="0" id="dt_next">Next</a></div>
  </div>
  <br>
  <br>
  <hr>
  <input onchange="filterme()" type="checkbox" name="type" value="MX|A|CNAME">All
  <input onchange="filterme()" type="checkbox" name="type" value="MX">MX
  <input onchange="filterme()" type="checkbox" name="type" value="A">A
  <input onchange="filterme()" type="checkbox" name="type" value="CNAME">CNAME
  <hr>
  <input onchange="filterme()" type="radio" name="free" value="0">0
  <input onchange="filterme()" type="radio" name="free" value="1">1
  <input onchange="filterme()" type="radio" name="free" value="">All
  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
  <script id="rendered-js">
    // Code goes here
    $(function() {
      otable = $('#dt').dataTable();
    });
    function filterme() {
      //build a regex filter string with an or(|) condition
      var types = $('input:checkbox[name="type"]:checked').map(function() {
        return '^' + this.value + '\$';
      }).get().join('|');
      //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
      otable.fnFilter(types, 0, true, false, false, false);
      //use radio values
      var frees = $('input:radio[name="free"]:checked')[0].value;
      //now filter in column 2, with no regex, no smart filtering, no inputbox,not case sensitive
      otable.fnFilter(frees, 2, false, false, false, false);
    }
    //# sourceURL=pen.js
  </script>
</body>
</html>

```
