顯示/使用複選框隱藏最接近格

我擁有多套複選框，顯示/隱藏基於該複選框被選中上一個div的。這可以用ID來完成，但我會在同一頁面上多組的這些，需要一個更通用的選擇，如類或選擇最接近元素的複選框。顯示/使用複選框隱藏最接近格

也許有人知道這是爲什麼不正確選擇或知道一個更好的辦法？ http://jsfiddle.net/infatti/h3rh7/

$('.check-hide-show-content').hide(); // hide all content divs 

// begin show/hide 
$('.check-hide-show input:checkbox').click(function() { 

    $(this).parent().next('.check-hide-show-content').show(); 


    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked 
});

來源

2013-02-12 simple

很簡單：

$('.check-hide-show-content').hide(); // hide all content divs 

// begin show/hide 
$('.check-hide-show input:checkbox').change(function() { 
    $('.check-hide-show-content').hide().eq($(this).index('.check-hide-show input:checkbox')).show(); 
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked 
});

來源

2013-02-12 23:31:53

尼斯。這工作。我不知道.eq和.index？ – simple 2013-02-12 23:42:11

這首先隱藏了它們，然後使用eq（）使用所匹配的複選框的索引找到基於0的元素。您必須將索引放入索引中，因爲它們都位於其他元素內，而「this」發現該索引已被檢查。 – 2013-02-12 23:53:11

如果你想在客戶端只能檢查一個元素，你可以使用輸入型收音機。

<form> 
<input type="radio" name="check" id="radio1"></input> 
<input type="radio" name="check" id="radio2"></input> 
</form>

請務必給予屬於共同擁有同一個名字收音機！

來源

2013-02-12 23:20:11 Herocaine

不是一種選擇。必須使用複選框，以便在用戶選擇選項之前不顯示任何內容。 – simple 2013-02-12 23:21:18

也許這就是你想要什麼 - http://jsfiddle.net/FloydPink/VL7Vx/1/

$('.check-hide-show-content').hide(); // hide all content divs 

// begin show/hide 
$('.check-hide-show input:checkbox').click(function() { 
    $('.check-hide-show-content').hide(); // hide all content divs 
    $('.' + $(this).val()).show(); 
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked 
});

請注意，我已經修改了您的標記，以及通過向內容添加div的，新的CSS類（option1和option2），其請遵循複選框中的值。這是將複選框綁定到相應的div的一種方法。

在你的代碼中，你試圖從複選框中使用'$（this）.parent（）。next（'.check-hide-show-content'）'來獲取div，這將不會成功，因爲內容div不在該選擇器指定的級別。

來源

2013-02-12 23:20:53

不是。將會有多套這些。檢查更新的小提琴。所以使用ID或值選擇器並不是真正的選擇。需要選擇下一個最接近的div來隔離這個集合。 – simple 2013-02-12 23:25:29

有關使用輸入上的HTML data attributes，並通過ID定位的div什麼？我在這裏一起引發一個簡單的例子：http://jsfiddle.net/mRZYf/

來源

2013-02-12 23:27:51 Tyr0

同樣，不能使用IDS。認爲50套這些是動態編寫的。 – simple 2013-02-12 23:40:17

顯示/使用複選框隱藏最接近格

回答

相關問題