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条)

报告相同问题?

悬赏问题

  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题
  • ¥15 如何使用arcgispro的训练深度模型,发现water和nowater精度为0?(相关搜索:深度学习)
  • ¥20 matlab作业不太懂呀有问题能给个代码吗
  • ¥15 自制电路图为何无法驱动ESP01S?
  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]
  • ¥15 uni.onBluetoothDeviceFound熄屏不运行
  • ¥15 求PHDA糖尿病并发症数据集,有偿