layui复选框勾选取值

admin管理员组

文章数量:1516870

layui复选框勾选取值

1.本次做页面的时候要用到复选框，并且勾选不同的复选框要展示不同的输入项，这就需要判断到底是勾选了那个。如下是我的页面实现。

<div class="layui-form-item" style="margin-top: 10px;"><label class="layui-form-label">提现门槛(多选):</label><div class="layui-input-block" id="withdrawConditionB"><input type="checkbox" name="like" lay-skin="primary" value="1" title="整点抢"/><input type="checkbox" name="like" lay-skin="primary" value="2" title="连续登录"/><input type="checkbox" name="like" lay-skin="primary" value="4" title="阅读任务"/></div></div>

2.如下是js代码实现

//获取提现门槛复选框的值
function getWithdrawConditionValue() {var value = 0;$('input[name=like]:checked').each(function(){//这里用所选复选框或运算后的值value = value | $(this).val();});return value;
}//提现门槛复选框点击显示或隐藏其对应的输入框
function withdrawConditionCheck() {var checkValue = getWithdrawConditionValue();//得到所勾选复选框位或运算后的值，再和对应的复选框进行位与运算，确定哪个复选框被勾选了if ((checkValue /*<![CDATA[*/&/*]]>*/ 1) == 1) {//整点抢$("#timeCountsDiv").show();} else {$("#timeCountsDiv").hide();}if ((checkValue /*<![CDATA[*/&/*]]>*/ 2) == 2) {//连续登录$("#loginDayDiv").show();} else {$("#loginDayDiv").hide();}if ((checkValue /*<![CDATA[*/&/*]]>*/ 4) == 4) {//阅读任务$("#readLimitDiv").show();} else {$("#readLimitDiv").hide();}
}
//提现复选框点击
$("#withdrawConditionB").click(function () {withdrawConditionCheck();
});

3.1 刚开始实现的时候是考虑给每个复选框起不同的id，然后根据每个复选框有没有勾选把其值进行循环拼接成字符串，然后判断拼接的字符串是否包含该复选框的值来判断到底是哪个复选框被勾选了，再对其对应的输入框进行展示或隐藏。

3.2 后来从同事那得到启发，对复选框的value值进行特殊的赋值，如我的，整点抢=1、连续登录=2、阅读限制=4，然后对其进行位或运算就能知道是哪些复选框被勾选了。如或运算后的值是3，那么就是勾选了整点抢和连续登录。如或运算后的值是7，那么就是三个复选框都勾选了。

本文标签： layui复选框勾选取值