jQuery的複選框

我要做到以下幾點：jQuery的複選框

我有三個複選框：

隱藏BOX1 隱藏BOX2 隱藏BOX3

我想使用jQuery ：

當Box1選中時，隱藏框2和3，我f取消選中使框2和3可見。我還在哪裏放置代碼？

在此先感謝

2013-03-03 Bob Sanders

隱藏BOX1 隱藏BOX2 隱藏BOX3 <腳本類型= 「文本/ JavaScript的」> 如果（$（「＃box1」）。attr（「checked」）== true） { alert（「Checked」）; } else { alert（「Unchecked」）; } – 2013-03-03 04:58:58

郵政編碼有問題，它可以被格式化，而不是在註釋中。顯示的代碼對於複選框語法也是無效的 – charlietfl 2013-03-03 05:19:47

下面是使用你的評論給了標記一個完整的例子。我還自由地給出了複選框的標籤，這意味着當您單擊文本時，它將切換複選框（更易於訪問和使用）。

See on JSFiddle

HTML

<form> 
    <div class="toggle-checkbox"> 
     <input type="checkbox" name="checkMeOut" id="box1" /> 
     <label for="box1">Hide Box1</label> 
    </div> 
    <div class="toggle-checkbox"> 
     <input type="checkbox" name="checkMeOut" id="box2" /> 
     <label for="box2">Hide Box2</label> 
    </div> 
    <div class="toggle-checkbox"> 
     <input type="checkbox" name="checkbox3" id="box3" /> 
     <label for="box3">Hide Box3</label> 
    </div> 
</form>

jQuery的

$('.toggle-checkbox input[type=checkbox]').click(function() { 
    if ($(this).is(':checked')) { 
     $('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide(); 
    } else { 
     $('.toggle-checkbox').show(); 
    } 
});

要包含的jQuery在你的頁面中，將<head>標籤中的以下。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

來源

2013-03-03 05:09:13

這適用於JS小提琴，但是當我把它放在我的記事本++和刷新我的鉻沒有任何作品。我需要安裝一些東西嗎？ – 2013-03-03 07:39:34

你有沒有包含jQuery？假如你有.toggle-check div，一切都應該工作。 – 2013-03-03 08:11:00

謝謝你完美的作品！我需要他們浮動內聯，而不是列表樣式，雖然 – 2013-03-03 08:16:44

你可以標記之間爲此在

$('.one').click(function() { 
if ($(this).is(':checked')) { 
    $('input[type=checkbox]').not(this).hide(); 
} else { 
    $('input[type=checkbox]').not(this).show(); 
} 
});

http://jsfiddle.net/davidchase03/MYASr/

來源

2013-03-03 04:58:19

假設您的複選框有ID爲「盒1」，「BOX2」和「BOX3」：

$(document).ready(function(){ 
    $("#box1").change(function(){ 
     $("#box2, #box3").toggle(); 
    } 
}

我還沒有測試過這個，但是任何時候隱藏方塊1都選中或取消選中編輯它將切換其他兩個框的可見性。

爲您的代碼將是位於只是你的結束標記之前的腳本元素中的最佳場所，所以像

<body> 
Your page stuff here 
<script> 
Code from above here 
</script> 
</body>

來源

2013-03-03 04:58:57

如果您想使用其他框，David Chase的答案肯定會對您有所幫助。它也更好地使用jQuery的選擇器。雖然腳本的位置是相同的。 – 2013-03-03 05:00:25

jQuery的複選框

回答

相關問題