博客

如何使用jQuery EasyUI设计网页上的复选框选择

  • Post category:jquery

使用jQuery EasyUI库设计网页上的复选框选择非常简单，下面是详细的攻略：

1. 引入jQuery EasyUI库

在页面头部引入jQuery EasyUI库，例如：

<head>
  <!-- 引入jQuery EasyUI库 -->
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/icon.css">
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>
</head>

2. 创建复选框选择

使用<input>标签创建复选框选择，例如：

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange

上面的代码创建了一个具有3个选项的复选框选择，所有选项的name属性都设置为”fruit“，这表示它们都属于同一组选择。

3. 使用jQuery EasyUI美化复选框选择

在上面创建的<input>标签后面，添加下面的代码，即可使用jQuery EasyUI美化复选框选择：

<script>
  $(function() {
    $('input[name="fruit"]').each(function() {
      $(this).wrap('<span class="checkbox"></span>').after('<span class="checkbox-label">' + $(this).next().text() + '</span>');
    });
    $('.checkbox').checkbox();
  });
</script>

<style>
  .checkbox-label {
    margin-left: 5px;
  }
</style>

上面的代码使用了jQuery的each()方法遍历所有名为”fruit“的复选框输入框，为每个输入框创建一个<span>元素，将其包裹，并在其后面添加一个带有文本的<span>元素。最后，利用jQuery EasyUI库中的checkbox()方法对所有的<span>元素调用，使其变成复选框选择。

示例1：复选框多选

在完成上述步骤后，就可以在网页上创建可视化的复选框选择了。这里假设我们创建了一个名为”fruit“的复选框选择，并在提交表单时将所选的水果种类发往后端进行处理：

<form id="myForm">
  <input type="checkbox" name="fruit" value="apple"> Apple
  <input type="checkbox" name="fruit" value="banana"> Banana
  <input type="checkbox" name="fruit" value="orange"> Orange
  <button type="submit">提交</button>
</form>

<script>
  $('#myForm').submit(function() {
    var fruits = [];
    $('input[name="fruit"]:checked').each(function() {
      fruits.push($(this).val());
    });
    alert('您选择了：' + fruits.join(','));
    return false;
  });
</script>

其中，$('input[name="fruit"]:checked')用于选中所有被选中的复选框，可以通过each()方法遍历所有选中的复选框，将它们的值保存在一个数组中，最后以逗号分隔的形式将其显示在一个alert()弹窗中。

示例2：复选框单选

我们也可以通过代码实现复选框单选的效果，例如：

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange

<script>
  $('input[name="fruit"]').change(function() {
    if ($(this).prop('checked')) {
      $('input[name="fruit"]').not(this).prop('checked', false);
    }
  });
</script>

上面的代码绑定了一个change事件，当一个复选框被选中时，它会将其他的复选框都取消选择，也就是实现了复选框单选的效果。

Tags: