jq操作 layui 表单中的复选框 checkbox 选中与不选中问题

最新推荐文章于 2024-08-27 04:35:44 发布

原创最新推荐文章于 2024-08-27 04:35:44 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个使用layui框架处理checkbox选择状态变化的实例。通过监听checkbox的改变事件，实现对选中状态的控制，并同步更新DOM元素的样式。该示例展示了如何在网页中创建和操作多个checkbox选项。

html 页面如下：

<td>
    <label class="checkbox-inline">

        <input type="checkbox" name="cb_web" class="cbItem" value="web" lay-skin="primary"/>
        <span>网站</span>
    </label>

    <label class="checkbox-inline">
        <input type="checkbox" name="cb_app" class="cbItem" value="app" lay-skin="primary"/>
        <span>APP</span>
    </label>

    <label class="checkbox-inline">
        <input type="checkbox" name="cb_weixin" class="cbItem" value="weixin" lay-skin="primary"/>
        <span>微信</span>
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" name="cb_weibo" class="cbItem" value="weibo" lay-skin="primary"/>
        <span>微博</span>
    </label>
    <input type="hidden" id="FabuChannel" name="FabuChannel">


</td>

对应的js所下：

form.on('checkbox()', function(data){
    var $cb=$(data.elem);
    var $div=$cb.parent().find("i").parent();
    var ck=$cb.attr("checked");
    if(ck){
        $cb.attr("checked",false);
        $div.removeClass("layui-form-checked");
    }else{
        $cb.attr("checked",true);
        $div.addClass("layui-form-checked");
    }



});