根據複選框值顯示/隱藏div

當用戶檢查'學生'（check-1）時。 2複選框值應該消失並顯示文本輸入div。截至目前，我已經得到了輸入 - 揭示。但我似乎無法讓複選框消失。根據複選框值顯示/隱藏div

我已經試過：

$(function() { 
    $('#check-1').change(function() {     
     $('.name').toggle(this.checked); 
     $('#check-1').hide(); 
     $('#check-2').hide(); 
    }).change(); 
});

但是，這並不工作。一旦選中「學生」，我如何隱藏複選框？有任何想法嗎？

這是一個小的fiddle。感謝您的幫助提前。

來源

2013-02-14 Modelesq

你爲什麼隱藏*雙向*？ – 2013-02-14 01:59:57

您隱藏了複選框，但沒有隱藏標籤。（這是你問什麼？） – bfavaretto 2013-02-14 02:00:52

試圖隱藏 – Modelesq 2013-02-14 02:11:04

包裝你的文本框用一個div，說「thisWrapper」

<div id="thisWrapper"> 
    <input type="checkbox" id="check-1" class="checkchoice staff" required><label for="check-1" class="choice staff">Staff</label> 
    <input type="checkbox" id="check-2" class="checkchoice student" required><label for="check-2" class="choice student">Student</label> 
</div>

，並在更改事件你貼地址：

$("thisWrapper").hide();

應該立即隱藏兩個複選框。當然，你必須添加一個「取消」或「重置」按鈕來再次顯示覆選框。

，或者你可以給複選框都喜歡「mycheckboxes」新的班級名稱，並呼籲這一點：

$(".mycheckboxes").click(function() { 
     $('#check-1').hide(); 
$("#check-2").hide(); 
});

*這裏「S上的完整的例子我有WORKING在Fiddler的**

試試這個：

<div id="thisWrapper"> 
    <input type="checkbox" id="check-1" class="checkchoice" required><label for="check-1" class="choice staff">Staff</label> 
    <input type="checkbox" id="check-2" class="checkchoice" required><label for="check-2" class="choice student">Student</label> 
</div> 
<div id="nameinput"> 
    <input type="text" placeholder="So what's your name?" /> 
</div> 

<script> 
    $(function() { 

     $(".checkchoice").change(function() { 
       $("#thisWrapper").hide(); 
       $("#nameinput").show(); 
     }); 

    }); 
</script>

來源

2013-02-14 02:05:18 Losbear

我試過你的建議。但似乎一切都消失了。 – Modelesq 2013-02-14 02:08:38

[小提琴]（http://jsfiddle.net/vkAy4/13/） – Modelesq 2013-02-14 02:09:19

對不起，我以爲你想隱藏標籤。試試這個： $（「＃check-2」）。click（function（）{（'＃check-1'）。hide（）; $（'＃check-2'）。hide（） ; } – Losbear 2013-02-14 02:11:36

請參見下面的代碼：

$(".my-check").change(function() { 
    if ($(this).is(':checked')) { 
     $(".my-box").show(); 
    } else { 
     $(".my-box").hide(); 
    } 
});

的更多細節：

來源

2013-02-14 02:32:36

根據複選框值顯示/隱藏div

回答

相關問題