根據單選按鈕顯示或隱藏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（已選中/未被選中）

回答

相關問題