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,那么就是三个复选框都勾选了。

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值