jQuery - 兩個獨立的複選框列表;在一個或另一箇中檢查一個項目，但不是兩個

我有兩個複選框列表;相同的值。我的jQuery代碼已經爲全選複選框工作。我不熟練使用jQuery/JavaScript，所以我在線編輯的代碼與我的代碼一起工作。jQuery - 兩個獨立的複選框列表;在一個或另一箇中檢查一個項目，但不是兩個

但是，我需要讓代碼工作，以便如果我在一個複選框列表中選擇一個項目，其他複選框列表中的相同項目會自動取消選中;反之亦然。

謝謝..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      body 
      { 
       font-family: Arial; 
       font-size:10pt; 
      } 
     </style> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
      <script type="text/javascript"> 
      $(function() { 
       $("[id*=chkStockAll]").bind("click", function() { 
        if ($(this).is(":checked")) { 
         $("[id*=chkStockFruits] input").attr("checked", "checked"); 
         $("[id*=chkOrderAll]").removeAttr("checked"); 
         $("[id*=chkOrderFruits] input").removeAttr("checked"); 
        } else { 
         $("[id*=chkStockFruits] input").removeAttr("checked"); 
        } 
       }); 
       $("[id*=chkStockFruits] input").bind("click", function() { 
        if ($("[id*=chkStockFruits] input:checked").length == $("[id*=chkStockFruits] input").length) { 
         $("[id*=chkStockAll]").attr("checked", "checked"); 
        } else { 
         $("[id*=chkStockAll]").removeAttr("checked"); 
        } 
       }); 
      }); 
     </script> 

     <script type="text/javascript"> 
      $(function() { 
       $("[id*=chkOrderAll]").bind("click", function() { 
        if ($(this).is(":checked")) { 
         $("[id*=chkOrderFruits] input").attr("checked", "checked"); 
         $("[id*=chkStockAll]").removeAttr("checked"); 
         $("[id*=chkStockFruits] input").removeAttr("checked"); 
        } else { 
         $("[id*=chkOrderFruits] input").removeAttr("checked"); 
        } 
       }); 
       $("[id*=chkOrderFruits] input").bind("click", function() { 
        if ($("[id*=chkOrderFruits] input:checked").length == $("[id*=chkOrderFruits] input").length) { 
         $("[id*=chkOrderAll]").attr("checked", "checked"); 
        } else { 
         $("[id*=chkOrderAll]").removeAttr("checked"); 
        } 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <form id="form1" runat="server"> 
     <asp:CheckBox ID="chkStockAll" Text="Select Stock All" runat="server" /> 
     <asp:CheckBoxList ID="chkStockFruits" runat="server"> 
      <asp:ListItem Text="Mango" /> 
      <asp:ListItem Text="Apple" /> 
      <asp:ListItem Text="Banana" /> 
      <asp:ListItem Text="Pineapple" /> 
      <asp:ListItem Text="Guava" /> 
      <asp:ListItem Text="Grapes" /> 
      <asp:ListItem Text="Papaya" /> 
     </asp:CheckBoxList> 
     <br/> 
     <br/> 
     <asp:CheckBox ID="chkOrderAll" Text="Select Order All" runat="server" /> 
     <asp:CheckBoxList ID="chkOrderFruits" runat="server"> 
      <asp:ListItem Text="Mango" /> 
      <asp:ListItem Text="Apple" /> 
      <asp:ListItem Text="Banana" /> 
      <asp:ListItem Text="Pineapple" /> 
      <asp:ListItem Text="Guava" /> 
      <asp:ListItem Text="Grapes" /> 
      <asp:ListItem Text="Papaya" /> 
     </asp:CheckBoxList> 
     </form> 
    </body> 
</html>

來源

2014-02-12 user1424532

爲什麼不使用單選按鈕？ – Tomer

單選按鈕只允許一個選定的項目。我需要選擇所有項目或一個列表中的一些項目，但不在另一個列表中。與其依靠最終用戶來確保他們不選擇其中一個，我需要系統自動完成此任務。 – user1424532

如果您只是將頁面的輸出HTML發佈到JSFiddle，並將JQuery分開，那將允許更多用戶回答這個問題。重現一個ASP.Net示例項目對於這樣一個小問題是很乏味的。 –

考慮有2名複選框列表 'CheckBoxList1' 和 'CheckBoxList2'，我想下面的代碼片段將解決你的問題。

 $document.ready(function() { 
     $('#CheckBoxList1').click(function() { 
      var checkboxlist = document.getElementById('CheckBoxList1'); 
      var inputlist = checkboxlist.getElementsByTagName('input'); 
      var checkboxlist2 = document.getElementById('CheckBoxList2'); 
      var inputlist2 = checkboxlist2.getElementsByTagName('input'); 

      for (var i = 0; i < inputlist.length; i++) { 
       if (inputlist[i].type == 'checkbox') 
        if (inputlist[i].checked) 
         inputlist2[i].checked = true; 
         else 
         inputlist2[i].checked =false; 
        } 
     }); 
    });

來源

2014-04-19 05:44:29 user3550944

jQuery - 兩個獨立的複選框列表;在一個或另一箇中檢查一個項目，但不是兩個

回答

相關問題