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

【问题标题】：Show div after reload if check box is checked如果选中复选框，则在重新加载后显示 div
【发布时间】：2016-01-08 20:49:35
【问题描述】：

如果选中，我正在尝试显示和隐藏 div。我让它工作，但如果我重新加载页面并且选中其中一个复选框，则不会显示具有相应数据属性的 div。我认为这可能是由于 toogleClass('hidden') 而我没有检查是否检查显示具有正确数据属性的相应 div。

-感谢大家的帮助

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');
    });
});

【问题讨论】：

当您说重新加载时，您的意思是整页重新加载吗？在这种情况下，您将不得不使用 localStorage/cookies 来跟踪您的数据。
好吧，当您访问该页面时，其中一个复选框已被选中。显示等于输入数据属性的 div。希望有帮助

标签： jquery html twitter-bootstrap-3

【解决方案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');
    });
});

【讨论】：

【解决方案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');
});
});

此代码可以改进，但我希望您了解此解决方案的想法。

【讨论】：