Question

我正在尝试显示并隐藏div，如果选中。我有它的工作，但如果我重新加载页面，其中一个复选框被检查div与相应的数据attr不会显示。我想这可能是由于toogleClass（＆＃39;隐藏＆＃39;）并且我没有检查是否选中显示相应的div以及正确的数据attr。

- 感谢所有帮助

html输入

<div class="input string optional additional_user_info_species_selection field_with_hint boolean">
<label class="string optional" for="additional_user_info_species_selection">Do you own or care for any of these species on your farm or ranch?</label>
<div class="checkbox">
    <input name="additional_user_info[has_cattle]" type="hidden" value="0">
    <input data-toggle-fields=".cattle-fields" type="checkbox" value="1" checked="checked" name="additional_user_info[has_cattle]" id="additional_user_info_has_cattle">
    <label for="additional_user_info_has_cattle">Cattle</label>
</div>

html如果检查是否重新加载

<div class="input integer optional additional_user_info_beef_cows_amt field_with_errors field_with_hint cattle-fields hidden">
<label class="integer optional" for="additional_user_info_beef_cows_amt">What is your annual maintained inventory of beef cows?</label>
<div class="input-group">
    <input class="form-control" type="text" value="" name="additional_user_info[beef_cows_amt]" id="additional_user_info_beef_cows_amt">
    <div class="input-group-addon">
        <span>Beef Cows</span>
    </div>
</div>
<span class="hint">If none, please enter '0'</span><span class="error">can't be blank</span>

jquery

$(document).ready(function() {
    $('.additional_user_info_species_selection input').change(function(){
        var target = $(this).data('toggle-fields');
        $(target).toggleClass('hidden');
    });
});

Answer 1

您可以遍历您网页的所有.additional_user_info_species_selection 已选中复选框，然后显示（或取消隐藏）相应的div。

使用javascript（以及一些jQuery）

$('.additional_user_info_species_selection input:checkbox:checked').each(function() {
    document.querySelector(this.dataset.toggleFields).classList.remove('hidden');
});

使用jQuery

$('.additional_user_info_species_selection input:checkbox:checked').each(function() {
    $($(this).data('toggle-fields')).removeClass('hidden');
});

最终javascript （使用javascript版）

$(document).ready(function() {
    $('.additional_user_info_species_selection input:checkbox:checked').each(function() {
        document.querySelector(this.dataset.toggleFields).classList.remove('hidden');
    });

    $('.additional_user_info_species_selection input').change(function() {
        var target = $(this).data('toggle-fields');
        $(target).toggleClass('hidden');
    });
});

Answer 2

如果您再次访问该页面，我们假设选中此复选框是因为例如以前的表单帖子，您必须在$（document）.ready（）中检查此内容。

$(document).ready(function() {
// see if the checkbox is already checked when arriving on the page
if($('.additional_user_info_species_selection input').is(':checked')){
   // do logic here to show the corresponding div
}
else{
   // do logic here to hide the corresponding div
}


$('.additional_user_info_species_selection input').change(function(){
    var target = $(this).data('toggle-fields');
    $(target).toggleClass('hidden');
});
});

这段代码可以改进，但我希望你理解这个解决方案的想法。

如果选中复选框，则在重新加载后显示div

2 个答案: