Miracle_Sky 2015-04-23 06:08 采纳率: 100%
浏览 6043
已采纳

选择li关联选择radio及checkbox的逻辑处理实现

 <ul class="list-group">
<li class="list-group-item" >
<input class="g"  name="g" type="checkbox"  value="27:13" />
A.1 </li>
<li class="list-group-item">
<input class="g"  name="g" type="checkbox"  value="28:13" />
B.2  </li><li class="list-group-item">
<input class="g"  name="g" type="checkbox"  value="28:13" />
C.3 </li></ul>

*如上,当点击li标签的时候其中的checkbox进行改变,如果选中过,则使其失去选择,未选中过,则使其选中。

    <ul class="list-group">
                        <li class="list-group-item">
                            <input name="g" class="g"  type="radio"  value="18:10" />
                            A.1
                        </li>
                        <li class="list-group-item">
                            <input name="g" class="g"  type="radio"  value="19:10" />
                            B.2
                        </li>
                    </ul>

*如上,当点击li标签的时候其中的radio进行改变,先使其全部失去选择,将当前点击的选中。

jquery的实现方式。自己写了radio的逻辑,没有好使,求指点?

 var type=$(t).parent().children("li").children("input.g").get(0).type;

if(type=="radio"){
var child=$(t).parent().children("li");
child.each(function(index, element) {
            $(t).parent().children("li").children("input.g").attr("checked","checked");
        });
        $(t).children("input.g").attr("checked","checked"); 
        console.log($(t).parent().children("li"));
    }

  • 写回答

2条回答 默认 最新

  • Codec007 2015-04-23 07:28
    关注

    <!DOCTYPE html>










    • A.1




    • A.2




    • A.3



    <br> $(&quot;#choice1 input[type=checkbox]&quot;).on(&#39;click&#39;, function (event) {<br> var $this = $(this);<br> $(&quot;#choice1&quot;).find(&quot;input[type=checkbox]&quot;).attr(&quot;checked&quot;, false);//选择当前点击的li元素的兄弟元素并解除选中<br> $this.attr(&quot;checked&quot;, &quot;checked&quot;);//勾中当前选择框<br> });<br>

    虽然修改dom是成功了,但你发现了一个所有浏览器都有的bug不会显示为勾中。也许是浏览器算法的通病。下面是Firefox IE 和chrome的测试结果。
    FireFox
    图片说明
    IE
    图片说明
    Chrome
    图片说明
    解决方案
    1、使用浏览器内置的radio组实现此功能。
    2、亲自实现Checkbox框。思路是使用css样式挂勾中框的背景。使用到的jquery 方法有addClass、removeClass

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题