Question

经过很长一段时间在这里使用您的所有信息和评论后，我能够解决所有代码问题。实际上，我不会说太多英语。对不起。无论如何，我们走吧！

我正在做生意，他们给了我一个项目，我差不多完成了，但是我无法处理它：

我必须通过JS检测操作系统用户系统，然后，如果客户端使用Windows，我应该告诉他，他可以安装“.exe”来通过桌面运行这个应用只显示{{1在描述中（这里是div - 在这种情况下只是一个矩形，所以，它没关系）。在经历了今天下午的所有努力之后，我无法解决它，我决定继续在家里进行测试：

div

问题：我尝试使用jQuery在<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>radio button test [FAILED haha]</title> <link rel="stylesheet" href="index.css"> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ systemName = navigator.platform; if(systemName.indexOf('Win') != -1){ document.getElementById("good").checked = true; }else{document.getElementById("bad").checked = true;} }); if($(#good).is(":checked")){ $(#ident).style.display = "block"; }; </script> </head> <body> <center> <div id="ident"></div> <form action=""> <input type="radio" name="system" id="good" value="good">Windows<br> <input type="radio" name="system" id="bad" value="bad">others </form> </center> </body> </html>上使用Change事件。问题是，如果它是默认选项，input#windows将不会出现，如果我在里面尝试它。

我完成了T.T 提前谢谢。

PS：这是我的第一篇文章，所以如果我做错了什么，抱歉！

Answer 1

您的问题是您没有收听change事件。您必须这样做，并且当change事件被触发时，根据单选按钮的已选中/未选中状态决定要执行的操作。此外，由于您提到监听change事件对页面加载时的单选按钮没有任何作用，这是因为您没有在页面加载时评估已选中/未选中状态。

p / s：你忘了用引号包装你的选择器。

因此，解决方案是在更改后在页面加载（或DOM就绪）和上触发一个函数：

$(document).ready(function() {
  var systemName = navigator.platform;
  if (systemName.indexOf('Win') != -1) {
    $('#good').prop('checked', true);
  } else {
    $('#bad').prop('checked', true);
  }

  var updateIdent = function() {
    if ($('#good').is(":checked")) {
      $('#ident').show();
    } else {
      $('#ident').hide();
    }
  }

  // Update when change event is fired
  $('form input[type="radio"]').on('change', updateIdent);

  // Update upon DOM ready
  updateIdent();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ident">IDENT</div>
<form action="">
  <input type="radio" name="system" id="good" value="good">Windows
  <br>
  <input type="radio" name="system" id="bad" value="bad">others
</form>

Answer 2

你的标记很好，你只是在你的jquery中遗漏了一些引号并且在设置display：block;这个JS会修复它：

    $(document).ready(function(){
        systemName = navigator.platform;
        if(systemName.indexOf('Win') != -1){
            document.getElementById("good").checked = true;
        }else{
            $document.getElementById("bad").checked = true;
        }
    });

    if($('#good').is(":checked")){            
            $('#ident').css('display','block');
    };

但是，除非您特别需要单选按钮，否则您可以完全不使用它们。像这样的一些JS效果最好：

    $(document).ready(function(){
        systemName = navigator.platform;
        if(systemName.indexOf('Win') != -1){
            $('#ident').css('display','block');
        }else{
            $('#ident').css('display','none');
        }
    });

希望有所帮助！

Answer 3

试试这个：

$('.radioBtn').change(function () {
    if (this.value == 'good') {
        $('#ident').show();
    } else if (this.value == 'bad') {
        $('#ident').hide();
    }
});

systemName = navigator.platform;

if (systemName.indexOf('Win') > -1) {
    $('#good').prop("checked", true).change();

} else {
    $("#bad").prop("checked", true).change();
}

查看实际操作：https://jsfiddle.net/fmotankv/24/

另外，请注意我的小提琴使用CSS自动隐藏#ident div。我建议使用此方法，以避免非Windows用户在被代码删除之前可能在屏幕上看到div flash。

根据radiobutton显示或隐藏div（已选中/未选中）

3 个答案: