根据单选按钮显示或隐藏div（已选中/未被选中）

经过很长时间这里并使用您的所有信息和评论，我能够解决我所有的代码问题。其实，我不会说太多英语。对不起。无论如何，我们走吧！根据单选按钮显示或隐藏div（已选中/未被选中）

我做的商业行为，他们给了我一个项目，我已经差不多完成了，但我不能用它处理：

我必须检测由JS的OS用户系统，然后在这之后，如果客户端使用Windows，我应该建议他可以安装一个“.exe”来运行这个应用程序，通过在描述中显示div的桌面（这里是div - 在这种情况下只是一个矩形，所以它不会没关系）。尝试了所有的下午之后，我没能解决它，我决定在家里还是在测试：

<!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>

问题：我试图使用jQuery上input#windows使用更改事件。问题是，如果它是默认选项，div将不会出现，并且，如果我尝试一下。

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

PS：这是我的第一篇文章，所以如果我做错了，对不起！

来源

2015-11-18 Victor Ribero Guasch

您应该（1）收听单选按钮上的'change'事件，然后根据选中/未选中的状态确定要执行的操作，以及（2）将此事件侦听器移动到您的DOM就绪事件中。 – Terry

确保你在你的jQuery选择器中有引号。例如使用$（'＃ident'）而不是$（＃ident） –

你的问题是你没有听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>

来源

2015-11-18 22:03:15 Terry

此解决方案可以正常工作，但如果目标只是显示div，则单选按钮是一个额外步骤，不是必需的。 –

@AdamKonieska如果OP想让用户选择自己（记住用户代理可以很容易被欺骗），那么你也应该听取更改事件。 – Terry

您的标记是好的，你只是在你的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'); 
     } 
    });

希望帮助！

来源

2015-11-18 22:07:13

试试这个：

$('.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股利。我会推荐这种方法来避免非Windows用户在被代码删除之前可能在屏幕上看到div闪存。

来源

2015-11-18 22:23:25 skippr

根据单选按钮显示或隐藏div（已选中/未被选中）

回答

相关问题