多选框

多选框 Checkbox，适合一个多选框孤立使用的情形。

如果需要使用多个多选框，需使用下侧的 CheckboxGroup 组件。

多选框代码演示

建立一个新颖的多选框

我已阅读并同意某基金协议
蓝色
紫色
橙色
默认未选中
禁止选择
禁止选择，已选中

1
2
3
4
5
6
7
8
9
10
11
12
13

<span id="J_Checkbox1"
      data-name=""
      data-value="wopay"
      data-checked>
    我已阅读并同意<a href="#">某基金</a>协议
</span>
<span id="J_Checkbox2" data-color="blue" data-checked>蓝色</span>
<span id="J_Checkbox3" data-color="purple" data-checked>紫色</span>
<span id="J_Checkbox4" data-color="orange" data-checked>橙色</span>
<span id="J_Checkbox5">默认未选中</span>
<span id="J_Checkbox6" data-disabled>禁止选择</span>
<span id="J_Checkbox7" data-checked data-disabled>禁止选择，已选中</span>

1
2
3
4
5
6
7

var checkbox1 = new woUI.Checkbox('#J_Checkbox1')
var checkbox2 = new woUI.Checkbox('#J_Checkbox2')
var checkbox3 = new woUI.Checkbox('#J_Checkbox3')
var checkbox4 = new woUI.Checkbox('#J_Checkbox4')
var checkbox5 = new woUI.Checkbox('#J_Checkbox5')
var checkbox6 = new woUI.Checkbox('#J_Checkbox6')
var checkbox7 = new woUI.Checkbox('#J_Checkbox7')

监听一个多选框操作事件

我已阅读并同意此协议

1
2
3
4
5

<span id="J_Checkbox8"
      data-name="agreement"
      data-value="wopay">
    我已阅读并同意此协议
</span>

1
2
3
4
5
6
7

var checkbox8 = new woUI.Checkbox('#J_Checkbox8')
checkbox8.on(function(state) {
    window.alert('操作name名:' + state.name
        + '\n值为：' + state.value
        + '\n当前选中状态：' + state.checked
        + '\n没有选中下，值为空')
})

操作一个多选框的状态

我已阅读并同意此协议

1
2
3
4
5
6
7
8
9
10

<span id="J_Checkbox9"
    data-name="agreement"
    data-value="wopay">
    我已阅读并同意此协议
</span>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="SetChecked()">选中</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="SetUnchecked()">取消选中</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="SetToggle()">反选</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="SetDisabled()">禁止选择</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="GetChecked()">获取状态/值</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var checkbox9 = new woUI.Checkbox('#J_Checkbox9')
var SetChecked = function(){
    checkbox9.change(true)
}
var SetUnchecked = function(){
    checkbox9.change(false)
}
var SetToggle = function(){
    checkbox9.change()
}
var SetDisabled = function(){
    checkbox9.disabled()
}
var GetChecked = function(){
    window.alert('选中状态：' + checkbox9.checked()
        + '\n当前值：' + checkbox9.value()
    )
}

多选框组合操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div>
    <span>选择你喜欢的颜色：</span>
    <span class="J_Checkbox1" data-name="color" data-value="red" data-checked>红色</span>
    <span>&nbsp;&nbsp;</span>
    <span class="J_Checkbox1" data-name="color" data-value="yellow">黄色</span>
    <span>&nbsp;&nbsp;</span>
    <span class="J_Checkbox1" data-name="color" data-value="blue">蓝色</span>
</div>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="GetGroupChecked()">获取状态/值</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="SetGroupToggle()">所有反选</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="SetGroupValue()">选中红色/蓝色</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="SetGroupDisabled()">禁止选择红色</button>
<p>实时状态监听，请查阅控制台。</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var checkboxGroup1 = new woUI.CheckboxGroup('.J_Checkbox1')
var GetGroupChecked = function(){
    window.alert('当前选中的值：' + checkboxGroup1.value().color)
}
var SetGroupToggle = function(){
    checkboxGroup1.changeByChecked('color')
}
var SetGroupValue = function(){
    checkboxGroup1.changeByValue('color',['red', 'blue'])
}
var SetGroupDisabled = function(){
    checkboxGroup1.disabled('color', 'red')
}
checkboxGroup1.on('color', function(e){
    console.log('实时监听-当前选中: ' + e.value.join('&'))
})

多选框 html 支持属性

多选框 API

初始化

new woUI.Checkbox(queryString)

queryString: 可以传入 Element.querySelector 支持字符串，也可以传入元素，但只支持一个元素。

获取值

woUI.Checkbox.prototype.value()

获取状态

woUI.Checkbox.prototype.checked()

监听改变/取消监听

woUI.Checkbox.prototype.on(callback)

callback: 回调事件接收1个对象参数，为即将切换到的状态，内容为当前元素的 checked 和 value。回调事件返回结果作为拦截器，如果返回 true，则会拒绝本次改变（change），如果返回 false 或不返回，则执行本次改变。

woUI.Checkbox.prototype.off(callback)

callback: 传入callback则取消当前回调，不传入则取消当前元素所有回调

改变选中状态

woUI.Checkbox.prototype.change(status, preventBroadcast)

status: 传入改变状态的值，支持 Boolean 格式。不传入则进行切换（toggle）。通过此方法改变 Checkbox 的值，默认会触发 on 事件，并受其返回值的影响。如需要不触发 on 事件，需要配置 preventBroadcast 参数

preventBroadcast: 阻止传播。在执行此方法后，不会触发 on 事件。

改变禁止选择状态

woUI.Checkbox.prototype.disabled(status)

status: 传入改变状态的值，支持 Boolean 格式。不传入则进行切换（toggle）。

多选框组初始化

new woUI.CheckboxGroup(queryString)

queryString: 可以传入 Element.querySelectorAll 支持字符串，也可以传入元素集合。

多选框组返回对象形式的当前值

woUI.CheckboxGroup.prototype.value()

多选框组返回对象形式的选中状态

woUI.CheckboxGroup.prototype.checked()

如果 checkbox 每组多于一个，则返回最后一个 checkbox 的状态

多选框组改变元素的状态

woUI.CheckboxGroup.prototype.changeByChecked(name, checked, preventBroadcast)

name: 为空则改变所有多选框状态，不为空则改变当前元素名的状态。

checked: 支持 Boolean 格式的选中状态。不传则为切换 （toggle）。

preventBroadcast: 阻止传播。在执行此方法后，不会触发 on 事件。

多选框组改变元素的值

woUI.CheckboxGroup.prototype.changeByValue(name, value, preventBroadcast)

name: 为要改变的多选框的元素名。

value: 必须为数组形式的值。

preventBroadcast: 阻止传播。在执行此方法后，不会触发 on 事件。

多选框组监听改变/取消监听

woUI.CheckboxGroup.prototype.on(name, callback)

name: 必传。要监听的多选框名。

callback: 回调函数必传，接收参数为对象，内含当前 name、当前 name 对应的值的集合以及当前触发元素。

woUI.CheckboxGroup.prototype.off(name, [callback])

name: 必传。要取消监听的多选框名。

callback: 传入callback则取消当前回调，不传入则取消当前元素所有回调。

多选框组改变禁止选择状态

woUI.CheckboxGroup.prototype.disabled(name, value, state)

name: 必传。为多选框名字筛选器。传入空为不进行过滤。

value: 必传。为多选框值筛选器。传入空为不进行过滤。

state: 支持 Boolean 格式，不传入则进行切换（toggle）。

注意

当 Checkbox 内容中，有需要触发 click 事件的元素时，需要对元素进行阻止默认事件 preventDefault 处理。否则点击此元素，会触发 Checkbox 状态改变。例：

1
2
3
4
5
6
7
8
9

<span class="J_Checkbox1">
    阅读并同意<span style="color:red" id="J_Test">Test</span>协议
</span>
<script>
    document.querySelector('#J_Test').addEventListener('click', function (e) {
        e.preventDefault()
        window.alert('这是原有内容的事件')
    })
</script>