没写过博客,还望大家不要见笑。
在做网页的过程中,使用了Semantic UI,遇到一些问题,诸如图标显示不全,下拉框无效或者Checkbox不能选中......
在此记录一下:Checkbox需加上"$('.ui.checkbox').checkbox();"
而且用onclick() 起不到效果,这里我用了onchange()
下面是我做过的一个小例子,全选与取消全选(一个Checkbox),发现在网上找的方法对于这个UI有些总是无效的,可能是jquery版本亦或是别的原因,最终这段代码实现了也就想保留下来。
<div class="ui checkbox">
<input type="checkbox" id="seleAll" class="seleAccountCheck" οnchange="seleAll(this)">
</div>
<span>全选</span>
<pre name="code" class="html"><div class="ui checkbox">
<input type="checkbox" name="seleChildCheck" id="seleChildCheck" class="seleAccountCheck" />
</div>
<div class="ui checkbox">
<input type="checkbox" name="seleChildCheck" id="seleChildCheck" class="seleAccountCheck" />
</div>
下面是js
function seleAll(obj) {
$('input[name="seleChildCheck"]').attr("checked", obj.checked);
var $seleattr = $("input[name='seleChildCheck']");
$seleattr.click(function () {
$("#seleAll").attr("checked", $seleattr.length == $("input[name='seleChildCheck']:checked").length ? true : false);
});
}
运行结果如图