javascript - input radio屬性預設為選取狀態，為什麼頁面刷新後，顯示的效果卻不是選取的呢？

Question

<p class="html">
    <p class="wrap">
        <p class="full">
            <p class="content-tab-box">
                <ul class="page-box">
                    <li class="roleRight animated">
                        <p id="pageTwo" class="pageWarp">
                            <p class="pro-system num-two">
                                <!--场景图-->
                                <p class="container">
                                    <p class="tab-system-wrapper">
                                    <!--tab section 1-->
                                        <input type="radio" name="tab-radio" class="tab-radio" id="tab-system-1" checked>
                                        <label for="tab-system-1" class="tab-title tab-handler-1"><i class="iconfont icon-Workonsite work-font"></i>Work onsite</label>
                                        <p class="tab-system-content tab-content-1">这里是默认显示的内容<p>
                                     <!--tab section 2-->
                                        <input type="radio" name="tab-radio" class="tab-radio" id="tab-system-2">
                                        <label for="tab-system-2" class="tab-title tab-handler-2"><i class="iconfont icon-Workincloud work-font"></i>Work in cloud</label>
                                         <p class="tab-system-content tab-content-2">
                                              <p class="systemup animated">
                                                  <img id="combination" src="img/cloud.png" style="width: 100%;" />
                                              </p>
                                          </p>
                                    </p>
                                </p>
                            </p>
                        </p>
                    </li>
                    <li class="roleRight animated"></li>
                    <li class="roleRight animated"></li>
                    <li class="roleRight animated"></li>
                </ul>
            </p>
        </p>
    </p>
</p>

預設進來後的顯示效果應該是這樣的：

現在卻是這樣，沒有被選取的：

我有查看過input的屬性：<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked#> ，為什麼刷新之後，就不顯示了呢？只有再點擊label隱藏的內容才會顯示？

我沒有寫js，都是css。

謝謝！

Answer 1

感謝 djyuning ：

 你说的对，是需要js控制的。
 

$(document).ready(function() {
    var checkedName = $('#tab-system-1');
    isChecked(checkedName);
}


function isChecked(name){
    var checkedTrue = name.checked ? true : false;
    if(checkedTrue == false){
        name.attr('checked','true');
    }else{
        name.attr('checked','false');
    }
}

Answer 2

沒太理解你的HTML結構，在我認為，頂部的按鈕和底部內容應該是平行的，你的卻是垂直的。

另外，只要設定了相同的name一個，input:radio就是可以自動切換選中，你的腳本再更改選中就無意義了。

取得狀態$(#selector)[0].checked，，注意這裡的[0]，需要把jQuery 物件轉為Dom 物件讀取屬性！

是prop(name,bool)，不要用attr！

說下解決方案，
首先，你需要為第一個input添加checked屬性，讓它在頁面載入時就是存在選取狀態的。
然後，你需要用js建立一個監聽方法，用來遍歷所有的input狀態。
接下來，你需要為input綁定change事件，值變化時再遍歷一遍狀態。
最後，如果你希望點擊後，再次刷新頁面仍然高亮在剛才點擊的位置，那麼你可能需要用到cookie插件了。
原理，頁面載入完成，初始化遍歷一遍，表單選中，再遍歷一遍。