嘿,伙计们是javascript的新手。我有一个带有html的单选按钮检查选项。我完成的代码
<form action="" id="avi">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<br></br>
<button type="button" id="bae">save me </button>
<script>
var c = document.getElementById('bae');
c.onclick = function() {
var m = document.getElementById('avi');
return m.checked;
}
</script>
我需要做什么
我需要做的是,当我单击save me button
时,我只需要保存单击的收音机的位置...假设如果我单击男性选项并单击保存,我需要在刷新后查看那些单击的单选选项。
这可以在不存储在数据库??..的情况下完成吗我认为这可以用js完成。
谢谢你的帮助
因此,由于大多数评论都指向您使用localStorage的您,因此我们开始:
存储值
localStorage.setItem(key, value);
// i.e. localStorage.setItem("name", "bob" );
要找回价值,您会这样做
localStorage.getItem(key)
// i.e. localStorage.getItem('name');
所以:
<input id="male" type="radio" name="sex" value="male">Male
<input id="female" type="radio" name="sex" value="female">Female
if(document.getElementById('male').checked){
localStorage.setItem('sex', 'male');
}
if(document.getElementById('female').checked){
localStorage.setItem('sex', 'female');
}
// getting the value
if(localStorage.getItem('sex')){
// if localStorage.getItem('sex') == male, set the male checkbox
// female if not
}
单选按钮是表单的一部分,表单将发送到服务器,刷新在返回时发生。因此,您将需要服务器端语言来知道在客户端选中了哪个单选按钮,例如 PHP,并且您不需要在数据库中存储任何内容。代码如下:
客户端:我的网页。.PHP
<html>
<head>
</head>
<body>
<?php
// GET FROM SERVER WHAT RADIOBUTTON WAS CHECKED (IN ANY).
$chk = $_SESSION["sex_checked"];
if ( strcmp( $chk,"male" ) == 0 )
$male = "checked";
else $male = "";
if ( strcmp( $chk,"female" ) == 0 )
$female = "checked";
else $female = "";
?>
<form action="myscript.php" method="post">
<input type="radio" name="sex" value="male" <?php echo male; ?> />Male
<input type="radio" name="sex" value="female"<?php echo female; ?> />Female
<input type="submit" value="Save me" />
</form >
</body >
</html>
服务器端:我的脚本。.PHP
<?php
$_SESSION["sex_checked"] = $_POST["sex"]; // SAVE CHECKED RADIOBUTTON.
header( "Location: mywebpage.php" ); // RETURN TO WEB PAGE (REFRESH).
?>
你可以为此使用 cookie。下面是一个一般示例:
<body onload="pageLoad()">
<form action="" id="avi">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<br></br>
<button type="button" id="bae" onclick="save()">save me </button>
<script>
var pageLoad = function () {
var savedValue = document.cookie.replace(/(?:(?:^|.*;s*)sexs*=s*([^;]*).*$)|^.*$/, "$1");
if (savedValue === 'male') {
document.querySelector('#avi input[type="radio"][value="male"]').checked = true;
}
else if (savedValue === 'female') {
document.querySelector('#avi input[type="radio"][value="female"]').checked = true;
}
};
var save = function () {
var m = document.querySelector('#avi input[type="radio"]:checked');
if (m)
document.cookie = "sex=" + m.value;
}
</script>
</body>
其他一些需要注意的事项:
您的原始代码实际上没有选择选中的无线电值在单击处理程序中。您正在获取表单的 ID,而不是当前选定的无线电。
您可以在标记中的按钮上有一个处理程序,而不是
在 JavaScript 中添加处理程序。这
要容易得多您正在对此进行编码。如果你使用的是jQuery,我会说放弃标记中的处理程序,并将其替换为就绪中的处理程序分配块。
你需要设置并获取值
function setCookie(name, value, days) { // from http://www.quirksmode.org/js/cookies.html
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
window.onload = function () {
var gender = getCookie('samplecookie');
if (gender) {
if (gender=="male") document.getElementsByName('sex')[0].click(); // or .checked=true;
else if (gender=="female") document.getElementsByName('sex')[1].click();
}
document.getElementById('bae').onclick = function () {
var m = document.getElementsByName('sex')[0];
var f = document.getElementsByName('sex')[1];
if (m.checked) {
setCookie('samplecookie', m.value, 30);
} else if (f.checked) {
setCookie('samplecookie', f.value, 30);
}
}
}
<form action="" id="avi">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<br></br>
<button type="button" id="bae">save me </button>