bootstrap插件icheck

最新推荐文章于 2024-08-19 10:10:02 发布

前燕慕容恪

最新推荐文章于 2024-08-19 10:10:02 发布

阅读量920

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_31935559/article/details/80908002

版权

前端专栏收录该内容

5 篇文章

订阅专栏

官网地址：http://www.bootcss.com/p/icheck/

效果图：

引入：

<link rel="stylesheet" href="../../static/vendor/icheck/custom.css">
<link rel="stylesheet" href="../../static/vendor/icheck/all.css">
<script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../static/vendor/icheck/icheck.js"></script>
<script type="text/javascript" src="../../static/vendor/icheck/custom.min.js"></script>

后台获取数据循环显示：

$(result.questionitems).each(function (index, item) {
      var paramHTML = '<div >' +
                    '	<div class="panel-heading">' +
                    '		<h3 class="panel-title">' + (index + 1) + '、' + this.ItemTitle + ''+(this.ChooseType==1?"(单选)":(this.ChooseType>1?"(多选)":""))+'</h3>' +
                    '	</div>' +
                    '   <div class="demo-list">'+
                    '	   <ul >';
                    var item = this;
                    var RowIndex = index;
                    $(this.subItems).each(function (index) {
                          if (item.ChooseType > 1) {
                                paramHTML += '<li class="questionnaire">' +
                                    '<label for="input-' + this.ID + '"><input  type="checkbox" id="ck' + this.ID + '" value="' + this.ID + '"  name="demo-radio" '+(this.selected==1?"checked":"")+'>' + (index + 1) + '、' +this.optionTitle+'</label></li>';

                          } else if (item.ChooseType == 1) {
                                paramHTML += '<li class="questionnaire">' +
                                     '<label for="input-' + this.ID + '"><input  type="radio" id="ck' + this.ID + '" value="' + this.ID + '" name="demo-radio' + RowIndex + '" '+(this.selected==1?"checked":"")+'>' + (index + 1) + '、' +this.optionTitle+'</label></li>';

                          } 

                     });
                         paramHTML += '	</ul>'+
                                     '  </div>'+
                                     '</div>';
                         $("#gridItems").append(paramHTML);

   });

初始化：

 $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
	}).iCheck({
	    labelHover : false, 
	    cursor : true, 
	    checkboxClass : 'icheckbox_square-blue', 
	    radioClass : 'iradio_square-blue', 
	increaseArea : '20%' 
});

获取选中的值：

 var items = new Array();
  $('input:checked').each(function() {
	items.push($(this).val());
 });