如何使用jquery維護單選按鈕和複選框的狀態（不需要刷新頁面）

我有一個<select>，有三個選項，分別叫做select,Scheme1,Scheme2。根據方案＃選擇我不得不切換Checkboxes（方案1）和radio按鈕（方案2）。如何使用jquery維護單選按鈕和複選框的狀態（不需要刷新頁面）

enter image description here

案例1：當我選擇Scheme1選項，並檢查兩（B和C）checkboxes，它的罰款。情況2：當我選擇Scheme2選項，並選中radio按鈕，我選擇B選項。

現在，如果我再次選擇Scheme1我失去了兩個複選框A和B的我以前的選擇，如果我選擇Scheme2我也失去了從單選按鈕，選擇我的選項B。

我如何處理這個問題。目前每次我繪製新的複選框列表和單選按鈕列表。

我如何保持兩個複選框，單選bottons狀態？

我有以下的HTML代碼

<html> 
<head> 
</head> 
<body> 

<select name="sltScheme" onchange="funCall(this.value)"> 
    <option value="select">Select Scheme</option> 
    <option value="Scheme1">Scheme 1</option> 
    <option value="Scheme2">Scheme 2</option> 
</select> 

<!-- will be displayed when Scheme 1 is selected but will be overwritten by Radio buttons--> 
<div id="schemeContainer" style="display: block; visibility: visible;"> 
    <span id="ele_0"> 
     <input name="schemeType[]" type="checkbox" value="1"> 
    </span> 
    <lable>A<br></lable> 
    <span id="ele_1"> 
     <input name="schemeType[]" type="checkbox" value="2"> 
    </span> 
    <lable>B<br></lable> 
    <span id="ele_2"> 
     <input name="schemeType[]" type="checkbox" value="3"> 
    </span> 
    <lable>C<br></lable> 
</div> 

<!--This separate DIV is just for illustration purpose only. Actually Radio buttons will be overwritten by Checkboxes and vice versa--> 

<!-- will be displayed when Scheme 2 is selected but will be overwritten by Checkboxes--> 
<div id="schemeContainer" style="display: block; visibility: visible;"> 
    <span id="ele_0"> 
     <input name="schemeType[]" type="radio" value="1"> 
    </span> 
    <lable>A<br></lable> 
    <span id="ele_1"> 
     <input name="schemeType[]" type="radio" value="2"> 
    </span> 
    <lable>B<br></lable> 
    <span id="ele_2"> 
     <input name="schemeType[]" type="radio" value="3"> 
    </span> 
    <lable>C<br></lable> 
</div> 


</body> 
</html>

而且我下面的JavaScript/jQuery代碼

<script> 
    function funCall(schemeType) 
    { 
     var obj = jQuery("input[name='schemeType[]']"); 
     if(schemeType == "scheme1") 
     { 
      for(i=0;i<obj.length;i++) 
      { 
       var eleval = obj[i].value; 
       jQuery("#ele_"+i).each(function(i) { 
        jQuery(this).html('<input value = "'+eleval+'" type="checkbox" name="'+obj[i].name+'" id="'+obj[i].id+'"/>'); 
       }); 
       obj[i].checked = false; 
      } 
     } 
     else if(schemeType == "scheme2") 
     { 
      for(i=0;i<obj.length;i++) 
      { 
       jQuery("#ele_"+i).each(function(i) { 
        jQuery(this).html('<input value = "'+eleval+'" type="radio" name="'+obj[i].name+'" id="'+obj[i].id+'"/>'); 
       }); 
      } 
     } 
    } 
</script>

編輯（我已經添加jQuery庫，所以不要用HTML代碼混淆注）：

我已刪除id從兩個複選框和單選按鈕屬性，因爲使用name屬性。

編輯2：

我在這裏2周所示的div相同的id <div id="schemeContainer"只是僅供說明用途。其實應該只有一個DIV而不是兩個。我將僅替換單個div中的廣播和複選框。

來源

2013-05-28 NullPointer

首先，您的每個輸入都應該有一個唯一的id屬性，並且兩個設置（複選框/收音機）中的每一個都應該有一個唯一的名稱。 –

@StevenMoseley，謝謝指點。請參閱更新的代碼。我使用'name'屬性，所以不需要'id'屬性。而且我在'name'屬性中使用'[]'作爲'Array' – NullPointer

'div's（'id =「schemeContainer」'）也是如此：該id應該是唯一的，並且使用相同的id兩次在一個頁面上很調皮。 –

你必須在這裏更改一些代碼：

1）。更改div id（單選按鈕容器組）

<div id="schemeContainer1" style="display: block; visibility: visible;"> 
    ....... 
</div>

2）。更改div id（複選框按鈕容器組）

<div id="schemeContainer2" style="display: block; visibility: visible;"> 
    ..... 
</div>

3）。根據章節更改JavaScript以顯示隱藏廣播或複選框容器。

function funCall(schemeType) 
{ 
    if(schemeType == "Scheme1") 
    { 
     jQuery("#schemeContainer1").show(); 
     jQuery("#schemeContainer2").hide(); 
    } 
    else if(schemeType == "Scheme2") 
    { 
     jQuery("#schemeContainer1").hide(); 
     jQuery("#schemeContainer2").show(); 
    } 
    else 
    { 
     jQuery("#schemeContainer2").show(); 
     jQuery("#schemeContainer1").show(); 
    } 
}

來源

2013-05-28 10:35:08

感謝您的回覆。但我無法保留兩個單獨的DIV，就像我在HTML評論中提到的那樣。 – NullPointer

我在想你有什麼建議。但有一些棘手的HTML結構，這就是爲什麼我想在同一個div中取代RADIO和CHECKBOXES的原因。但讓我檢查一下，我能否處理你在我目前的結構中提出的建議。 – NullPointer

+1我已經給你答案:) – NullPointer

如果我正確地讀你的HTML註釋，問題不在於你不能有兩個div，那就是你不想當最後發送的形式提交兩個div的。我會考慮Raskesh的解決方案（使用切換來顯示和隱藏已經選擇的選項），但添加禁用表單元素被隱藏和啓用時可見，以便提交禁用的字段集不被服務器處理。此外，如果您對僅適用於HTML5的解決方案感到滿意，fieldset現在可以採用disabled屬性，該屬性會禁用其中的所有欺騙性表單控件，從而無需循環複選框以禁用每個解決方案。

下面是一個讓jquery的代碼更輕的方法：將所有可交換表單字段與共享類（如「swappable」）一起包含在字段集中，並將其設置爲顯示/隱藏。然後讓一個函數偵聽fieldset被設置爲可見/隱藏的時間，以及a）將字段集設置爲禁用（隱藏時）或未禁用（當可見時）用於HTML5瀏覽器，並且還具有所有表單域類型的選擇器，被隱藏並具有可交換類，並且爲特定字段設置/取消設置禁用屬性。通過爲所有可交換的包裝使用類，不僅可以更輕鬆地選擇這些字段，還可以避免意外禁用有意隱藏的字段。如果您合併了modernizr，如果fieldset接受禁用的屬性，則可以跳過每場禁用。

來源

2013-05-28 10:42:29 Anthony

是的。您正確地閱讀了有關HTML DIV的問題。我必須爲RADIO按鈕和CHECKBOXES保持同名。如果我同時使用兩個不同的DIV，那麼我必須更改RADIO和CHECKBOX的名稱。 – NullPointer

不，我不使用HTML5，那是我的問題，在HTML5下面是否支持'DISABLE'？我有一點棘手的結構來處理已經從以前的代碼中產生的這種情況。 – NullPointer

如果兩個控件具有相同的名稱，並且其中一個被設置爲禁用（如果兩個控件都在非禁用狀態下傳遞，以至於知道最壞情況），則值得測試。我相信名稱屬性不必是唯一的，禁用是由控件，而不是屬性，所以它應該沒問題。 – Anthony

如何使用jquery維護單選按鈕和複選框的狀態（不需要刷新頁面）

回答

相關問題