选择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"));
    }

<!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

radio name相同会自动取消，不需要做特殊处理

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<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的逻辑，没有好使，求指点？
<script>
    var ipt;
    $('li').click(function (e) {
        ipt = $('input', this)[0];
        if (ipt.type == 'radio') ipt.checked = true;
        else if (ipt.type == 'checkbox') ipt.checked = !ipt.checked;
    });

</script>