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 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能!!有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘