我有响应式 css 选项卡,我用它来以优雅的方式显示信息,但是当用户刷新页面时,它会返回到第一次检查的输入。我想知道如何让页面上的用户按钮保持选中状态,刷新他之前选择的按钮。我写了一个脚本,但它似乎不起作用。
标签
<input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked">
<label class="labeltabs" for="tab1">Inbox</label>
<input class="inputabs" id="tab2" type="radio" name="tabs" >
<label class="labeltabs"for="tab2">Important</label>
<input class="inputabs" id="tab3" type="radio" name="tabs">
<label class="labeltabs" for="tab3">Bin</label>
脚本
<script>
$(document).ready(function(){
$('.inputabs input[type="radio"]').each(function(){
$(this).attr("checked",$(this).checked());
}
);
</script>
最佳答案
以下是否符合您的要求:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if(localStorage.selected) {
$('#' + localStorage.selected ).attr('checked', true);
}
$('.inputabs').click(function(){
localStorage.setItem("selected", this.id);
});
});
</script>
</head>
<body>
<input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked">
<label class="labeltabs" for="tab1">Inbox</label>
<input class="inputabs" id="tab2" type="radio" name="tabs" >
<label class="labeltabs"for="tab2">Important</label>
<input class="inputabs" id="tab3" type="radio" name="tabs">
<label class="labeltabs" for="tab3">Bin</label>
</body>
</html>
关于javascript - PHP Javascript : Keeping radio buttons selected on page refresh,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42335747/