使用if/else顯示/隱藏帶有複選框的div

完全不熟悉HTML/CSS之後的任何類型的編碼。我試圖環視，但我不知道如何將解決方案應用於我的特定問題。我有一個複選框列表爲這樣：使用if/else顯示/隱藏帶有複選框的div

<input type="checkbox" value="de-borders" /> Choose my border

當你點擊提交按鈕（有5個複選框），它應該表現出的那些檢查的申報單。所以我有一個鏈接到提交的href的函數。我遇到的問題是如果用戶UNCHECKS一個框，然後再次提交，我需要這些框消失。

這是我（我有幫助，所以我不明白這一點完全）：

var show_panels =(function(){ 
    $("#de-options input").each(function(index, element) { 
     var val = $(element).attr('value'); 
     if ($("#de-options input").is(":checked")) 
     { 
      $('#' + val).show(); 
     } 
     else 
     { 
      $('#' + val).hide(); 
     } 
     }); 
    });

如果我有「如果」的問題。因爲.each我不知道如何指定'看看這些複選框，如果他們檢查...'，因爲我現在在那裏的'$ de-options'現在只顯示所有這些，而不管我是什麼已經檢查過。

所以真的我只需要知道如何爲'如果'。

感謝您的幫助。

來源

2012-04-26 anubis

$("#de-options input[type='checkbox']").each(function() { 
     var val = $(this).val(); 
     if($(this).is(':checked')) { 
      $('#' + val).show(); 
     } else { 
      $('#' + val).hide(); 
     } 
    });

來源

2012-04-26 17:19:45 thecodeparadox

不對'：'印度語ates元選擇器，你的第一個應該是'[type = checkbox]'，第二個是正確的 – Endophage 2012-04-26 17:24:10

您正在構建一個名爲「val」的變量，該變量設置爲「$（element）.attr（'value'）;」。在你的例子中，複選框的值是「de-borders」，所以在這種情況下，val =「de-borders」...迄今爲止還不錯。但是，一旦在你的if語句中，它試圖隱藏$（'＃'+ val）或$（'＃de-borders'）。這是說要隱藏頁面上的元素，並使用不存在的去邊框ID。取代if/else的內容： $（element）.show（）;和$（element）.hide（）;

來源

2012-04-26 17:27:58 CashIsClay

這正是我所需要的。謝謝！並感謝所有人的迴應。 :) – anubis 2012-04-26 19:17:11

不知道你的HTML如何看起來像這樣。假設它是這樣的，這應該工作。

HTML

<div id="de-options"> 
    <input type="checkbox" value="de-borders" /> Choose First 
    <input type="checkbox" value="de-borders2" /> Choose Srcond 
    <input type="checkbox" value="de-borders3" /> Choose Third 
</div> 

<div id="de-borders"> Div One</div> 
<div id="de-borders2">Div Two</div> 
<div id="de-borders3">Div Three</div> 

<input type="submit" value="save" />

腳本

$（函數（）{

$("input[type='submit']").click(function(e){ 
     e.preventDefault(); 

    $("#de-options input[type='checkbox']").each(function() { 
     var item= $(this); 
     var val = item.attr('value'); 
     if (item.is(":checked")) 
     { 
     $('#' + val).show(); 
     } 
     else 
     { 
      $('#' + val).hide(); 
     } 
    }); 
    }); 

});

這裏是工作樣例http://jsfiddle.net/hzpVy/15/

來源

2012-04-26 17:34:55 Shyju

使用if/else顯示/隱藏帶有複選框的div

回答

相關問題