程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> 標簽-選擇li關聯選擇radio及checkbox的邏輯處理實現

標簽-選擇li關聯選擇radio及checkbox的邏輯處理實現

編輯:編程綜合問答
選擇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

shuhaoxing
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved