Bootstrap 单选复选(iCheck)控件状态值的获取

 Bootstrap   高蒙   阅读(5927)   评论(0)   2016-05-08 14:11:22    Bootstrap 单选复选(iCheck)控件 


补充:

通过测试icheck插件直接提交就可以获取到表单里面的值。

下面的步骤自己研究的:

项目改版要用到bootstrap的单选复选按钮效果,前端只是将效果发给我了,具体的点击切换表单值就没有做了。

代码:

<div class="demo-list">
<ul>
    <li>
<input type="radio" id="every0" name="every" value="0" checked <{/if}>>

<label for="every0">每周</label>
    </li>
    <li>
<input type="radio" id="every2" name="every" value="1" >
<label for="every2">每月</label>
    </li>
    <li>
<input type="radio" id="every3" name="every" value="2" >
<label for="every3">每季</label>
    </li>
    <li>
<input type="radio" id="every4" name="every" value="3" >
<label for="every4">每年</label>
    </li>
</ul>
</div>

 

现在的效果是达到了,但是我们要的效果是当点击某个单选按钮的时候,我们表单的值也要随之改变。

 

我的代码是:

<input type="checkbox"  checked  class="fchen_control" data-size="small"/>

 

我的解决思路:

1、首先我们要获取到点击的当前元素的id。

2、当我们点击的时候,更换表单的值。

3、我们这块用隐藏域去处理。

 

隐藏域:

<input type="hidden" name="time" class="g_time" value="">

 

js代码:

<script>
    $(document).ready(function(){
        var callbacks_list = $('.demo-callbacks ul');
        $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
            callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
                // 处理的代码 start
    if(event.type == 'ifClicked'){
               var c = $("#"+this.id).val();
               $('.g_time').val(c);
            }
                // end

        }).iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%'
        });
    });
</script>

 

通过上面的js就可以实现,点击相应的id就会修改表单name等于id的value值。

最后补充上官方的实例代码:

这里的js和css可以在官网上面自行下载。

<link href="./css/custom.css?v=1.0.2" rel="stylesheet">
  <link href="./skins/all.css?v=1.0.2" rel="stylesheet">
  <script src="./js/jquery.js"></script>
  <script src="icheck.js?v=1.0.2"></script>
  <script src="./js/custom.min.js?v=1.0.2"></script>

<form action="index.php" method="post">
              <input type="checkbox" checked />
        <div class="demo-list clear">
          <ul>
            <li>
              <input tabindex="1" type="checkbox" id="input-1" name="checkboxs[]" value="1">
              <label for="input-1">Checkbox, <span>#input-1</span></label>
            </li>

            <li>
              <input tabindex="2" type="checkbox" id="input-2" name="checkboxs[]" value="2">
              <label for="input-2">Checkbox, <span>#input-2</span></label>
            </li>

<li>
              <input tabindex="3" type="checkbox" id="input-3" name="checkboxs[]" value="3">
              <label for="input-3">Checkbox, <span>#input-3</span></label>

            </li>
          </ul>

          <ul>

            <li>
              <input tabindex="3" type="radio" id="input-3" name="demo-radio" value="4">
              <label for="input-3">Radio button, <span>#input-3</span></label>
            </li>

            <li>
              <input tabindex="4" type="radio" id="input-4" name="demo-radio" value="5" checked>
              <label for="input-4">Radio button, <span>#input-4</span></label>
            </li>
          </ul>

  </div> 

  <input type="submit" name="sub" class="btn btn-primary" value="提交">

</form>
          <script>
          $(document).ready(function(){
            var callbacks_list = $('.demo-callbacks ul');
            $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
              callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
            }).iCheck({
              checkboxClass: 'icheckbox_square-blue',
              radioClass: 'iradio_square-blue',
              increaseArea: '20%'
            });
          });
          </script>

里面的结构要一致。



相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客