首页 » 前端技术 » Bootstrap 单选复选(iCheck)控件状态值的获取

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

高蒙 2016/05/08 14:11 6.6k浏览 0评论 Bootstrap


补充:

通过测试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>

里面的结构要一致。



相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    485

    标签

    42

    热度

    10w+

    南京, 江苏, 中国

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