我需要做什么

Question

嘿，伙计们我是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我只需要保存点击的收音机的位置...假设我点击了男性选项并点击了保存我需要看到那些点击的收音机刷新后的选项..

这可以在不存储db的情况下完成吗??我认为这可以用js来完成..

感谢您的帮助

Answer 1

因此，大多数评论都指向您使用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
}

Answer 2

你可以使用cookies。这是一个一般的例子：

<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*)sex\s*\=\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，我会说放弃标记中的处理程序，并将其替换为就绪中的处理程序赋值块。

Answer 3

您的radiobuttons是表单的一部分，表单将发送到服务器，并在它返回时进行刷新。因此，您需要使用服务器端语言来了解客户端检查的单选按钮，例如PHP，并且您不需要在数据库中存储任何内容。这是代码：

客户端：MYWEBPAGE.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>

SERVERSIDE：MYSCRIPT.PHP

<?php
$_SESSION["sex_checked"] = $_POST["sex"]; // SAVE CHECKED RADIOBUTTON.
header( "Location: mywebpage.php" ); // RETURN TO WEB PAGE (REFRESH).
?>

Answer 4

您需要设置AND获取值

    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>

保持选定的选项保存在js中

我需要做什么

4 个答案: