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

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

报告相同问题?

悬赏问题

  • ¥30 Matlab打开默认名称带有/的光谱数据
  • ¥50 easyExcel模板 动态单元格合并列
  • ¥15 res.rows如何取值使用
  • ¥15 在odoo17开发环境中,怎么实现库存管理系统,或独立模块设计与AGV小车对接?开发方面应如何设计和开发?请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
  • ¥15 CSP算法实现EEG特征提取,哪一步错了?
  • ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
  • ¥15 vue3前端取消收藏的不会引用collectId
  • ¥15 delphi7 HMAC_SHA256方式加密
  • ¥15 关于#qt#的问题:我想实现qcustomplot完成坐标轴
  • ¥15 下列c语言代码为何输出了多余的空格