uniapp复选框的详细阐述

一、uniapp复选框样式

uniapp的复选框可以根据不同的需求设置不同的样式。首先，我们需要定义 checkbox 的外层包裹元素 class 类名，然后通过对该 class 进行样式设置，代码如下：

/* checkbox 组件外层包裹元素 */
.checkbox-group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* checkbox 组件样式 */
.checkbox {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
}
/* 选中状态 */
.checkbox:checked {
  background-color: #007aff;
  border-color: #007aff;
}
/* 半选中状态 */
.checkbox:indeterminate {
  background-color: #007aff;
  border-color: #007aff;
}

二、uniapp复选框动态选中

要动态选中一个复选框，我们可以使用 v-model 来绑定一个 data 中定义的变量，然后通过修改该变量的值来动态选中或取消选中一个复选框。代码如下：

  

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

三、uniapp复选框使用

在使用 uniapp 的复选框时，需要注意每个复选框的 name 属性应该是唯一的，同时需要将每个复选框的值绑定到 data 中定义的变量上。代码如下：

  
<script>
export default {
  data() {
    return {
      fruit: {
        apple: false,
        banana: false
      }
    }
  }
}
</script>

四、uniapp复选框回显

如果需要将之前设置的复选框选中状态回显到界面上，可以通过在 data 中定义数组变量，将选中的值保存在数组中，然后在渲染界面时判定当前值是否在数组中，如果在则将该复选框设置为选中状态。代码如下：

  

<script>
export default {
  data() {
    return {
      items: [
        {
          label: "苹果",
          name: "apple",
          value: "apple",
          checked: false
        },
        {
          label: "香蕉",
          name: "banana",
          value: "banana",
          checked: false
        },
        {
          label: "橘子",
          name: "orange",
          value: "orange",
          checked: false
        }
      ],
      checkedList: []
    }
  },
  mounted() {
    // 模拟回显数据
    this.checkedList = ["apple", "orange"];
  }
}
</script>

五、uniapp复选框获取选中值

获取所有选中的复选框的值，可以通过遍历 data 中定义的变量，将选中的值保存到数组中。代码如下：

  

<script>
export default {
  data() {
    return {
      items: [
        {
          label: "苹果",
          name: "apple",
          value: "apple",
          checked: false
        },
        {
          label: "香蕉",
          name: "banana",
          value: "banana",
          checked: false
        },
        {
          label: "橘子",
          name: "orange",
          value: "orange",
          checked: false
        }
      ],
      checkedList: []
    }
  },
  methods: {
    handleSubmit() {
      const selected = [];
      for (let i = 0; i < this.items.length; i++) {
        if (this.checkedList.indexOf(this.items[i].value) !== -1) {
          selected.push(this.items[i]);
        }
      }
      console.log(selected);
    }
  }
}
</script>

六、uniapp复选框展示详情

在展示一组多选框数据时，我们可以通过遍历一个数组，动态生成一组多选框，并将选中的值保存到 data 中定义的变量中，以便在提交表单时使用。代码如下：

  

<script>
export default {
  data() {
    return {
      items: [
        {
          label: "苹果",
          name: "apple",
          value: "apple",
          checked: false
        },
        {
          label: "香蕉",
          name: "banana",
          value: "banana",
          checked: false
        },
        {
          label: "橘子",
          name: "orange",
          value: "orange",
          checked: false
        }
      ],
      checkedList: []
    }
  },
  methods: {
    handleSubmit() {
      const selected = [];
      for (let i = 0; i < this.items.length; i++) {
        if (this.checkedList.indexOf(this.items[i].value) !== -1) {
          selected.push(this.items[i]);
        }
      }
      console.log(selected);
    }
  }
}
</script>

七、uniapp复选框改变背景颜色

我们可以通过改变复选框的背景色，来展示不同的状态。代码如下：

  

<script>
export default {
  data() {
    return {         
      checked: false
    }
  }
}
</script>

八、uniapp复选框实现购物车功能

在购物车功能中，我们可以通过遍历购物车中商品列表，动态生成一组多选框，并将选中的值保存到 data 中定义的变量中，以便在提交表单时使用。代码如下：

  

<script>
export default {
  data() {
    return {
      cart: [
        {
          name: "苹果",
          price: 5.0
        },
        {
          name: "香蕉",
          price: 3.0
        },
        {
          name: "橘子",
          price: 4.0
        }
      ],
      checkedList: []
    }
  },
  computed: {
    totalPrice() {
      let sum = 0;
      for (let i = 0; i < this.checkedList.length; i++) {
        sum += parseFloat(this.checkedList[i]);
      }
      return sum;
    }
  },
  methods: {
    submitOrder() {
      const selected = [];
      for (let i = 0; i < this.cart.length; i++) {
        if (this.checkedList.indexOf(this.cart[i].price.toString()) !== -1) {
          selected.push(this.cart[i]);
        }
      }
      console.log(selected);
    }
  }
}
</script>

九、uniapp获取复选框的值

在获取复选框的值时，我们可以通过 v-model 的方式将选中的值保存到 data 中定义的变量中，以便在提交表单时使用。代码如下：

  

<script>
export default {
  data() {
    return {         
      checked: false
    }
  }
}
</script>

十、uniapp下拉选择组件选取

在多选框中，我们也可以使用下拉选择组件来实现多选框的功能。代码如下：

  

<script>
export default {
  data() {
    return {
      pickerColumns: ["苹果", "香蕉", "橘子"],
      showPickerValue: false,
      selectedValues: []
    };
  },
  methods: {
    showPicker() {
      this.showPickerValue = true;
    },
    hidePicker() {
      this.showPickerValue = false;
    },
    onPickerConfirm(value) {
      this.selectedValues = value;
      this.hidePicker();
    }
  }
};
</script>