h5 获取动态数据进行四级联动，其中一二级为下拉框，三级为表格有复选框，四级为显示数据的表格

好的，你的问题是如何使用H5获取动态数据进行四级联动，其中一二级为下拉框，三级为表格有复选框，四级为显示数据的表格。

首先，你需要使用AJAX技术获取后端动态数据，然后将数据渲染到页面上。以下是一个简单的AJAX请求示例：

$.ajax({
  url: 'your-api-url',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // 渲染数据到页面上
  },
  error: function(xhr, status, error) {
    console.error(error);
  }
});

接下来，你需要使用HTML和JavaScript来实现四级联动。下面是一个简单的示例：

<!-- 第一级下拉框 -->
<select id="select1"></select>

<!-- 第二级下拉框 -->
<select id="select2"></select>

<!-- 第三级表格 -->
<table id="table3">
  <thead>
    <tr>
      <th></th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<!-- 第四级表格 -->
<table id="table4">
  <thead>
    <tr>
      <th>名称</th>
      <th>属性1</th>
      <th>属性2</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

// 第一级下拉框
var $select1 = $('#select1');

// 第二级下拉框
var $select2 = $('#select2');

// 第三级表格
var $table3 = $('#table3');
var $table3Body = $table3.find('tbody');

// 第四级表格
var $table4 = $('#table4');
var $table4Body = $table4.find('tbody');

// 获取第一级数据
$.ajax({
  url: 'your-api-url-1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // 渲染第一级下拉框
    for (var i = 0; i < data.length; i++) {
      var option = $('<option>').val(data[i].value).text(data[i].text);
      $select1.append(option);
    }
    
    // 触发第一级下拉框的change事件，获取第二级数据
    $select1.trigger('change');
  },
  error: function(xhr, status, error) {
    console.error(error);
  }
});

// 第一级下拉框change事件
$select1.on('change', function() {
  var value = $(this).val();
  
  // 清空第二级下拉框和第三级表格
  $select2.empty();
  $table3Body.empty();
  
  // 获取第二级数据
  $.ajax({
    url: 'your-api-url-2?value=' + value,
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      // 渲染第二级下拉框
      for (var i = 0; i < data.length; i++) {
        var option = $('<option>').val(data[i].value).text(data[i].text);
        $select2.append(option);
      }
      
      // 触发第二级下拉框的change事件，获取第三级数据
      $select2.trigger('change');
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
});

// 第二级下拉框change事件
$select2.on('change', function() {
  var value = $(this).val();
  
  // 清空第三级表格和第四级表格
  $table3Body.empty();
  $table4Body.empty();
  
  // 获取第三级数据
  $.ajax({
    url: 'your-api-url-3?value=' + value,
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      // 渲染第三级表格
      for (var i = 0; i < data.length; i++) {
        var tr = $('<tr>');
        var checkbox = $('<input>').attr('type', 'checkbox').val(data[i].value);
        var td1 = $('<td>').append(checkbox);
        var td2 = $('<td>').text(data[i].text);
        tr.append(td1).append(td2);
        $table3Body.append(tr);
      }
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
});

// 第三级表格change事件
$table3Body.on('change', 'input[type="checkbox"]', function() {
  var values = [];
  $table3Body.find('input[type="checkbox"]:checked').each(function() {
    values.push($(this).val());
  });
  
  // 清空第四级表格
  $table4Body.empty();
  
  // 获取第四级数据
  $.ajax({
    url: 'your-api-url-4?values=' + values.join(','),
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      // 渲染第四级表格
      for (var i = 0; i < data.length; i++) {
        var tr = $('<tr>');
        var td1 = $('<td>').text(data[i].text);
        var td2 = $('<td>').text(data[i].attr1);
        var td3 = $('<td>').text(data[i].attr2);
        tr.append(td1).append(td2).append(td3);
        $table4Body.append(tr);
      }
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
});

以上是一个基本的实现过程，你需要根据你的实际需求来进行修改和完善。