Показать или скрыть div в зависимости от радиообмена (проверено/нет)

После долгого времени здесь, используя всю вашу информацию и комментарии, я смог решить все проблемы с кодом. Вообще-то, я не слишком много говорю по-английски. Простите за это. Во всяком случае, здесь мы идем!Показать или скрыть div в зависимости от радиообмена (проверено/нет)

Я делаю бизнес-практики, и они дали мне проект, и я уже почти закончил, но я не могу справиться с этим:

Я должен обнаружить систему пользователя ОС с помощью JS, а затем после этого, если клиент использует 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 не появится, и если я попробую ее наизнанку.

I'm done T.T Заранее благодарим.

PS: Это мой первый пост, поэтому, если я сделал что-то не так, извините!

источник

2015-11-18 Victor Ribero Guasch

Вы должны (1) прослушать событие «change» на переключателях, а затем решить, что делать на основании проверенного/непроверенного состояния, и (2) перенести этот прослушиватель событий в ваше событие готовности DOM. – Terry

Убедитесь, что у вас есть кавычки вокруг селекторов jquery. например используйте $ ('# ident') вместо $ (# ident) –

Ваша проблема в том, что вы не слушаете событие change. Вам нужно будет это сделать, и когда будет запущено событие change, решите, что делать на основе проверенных/непроверенных статусов переключателей. Кроме того, поскольку вы отмечаете, что прослушивание события change ничего не делает для переключателей на загрузке страницы, это связано с тем, что вы не оцениваете статус проверенного/непроверенного на загрузке страницы.

р/с: И вы забыли обернуть свой селектор в кавычки.

Таким образом, решение сгореть функцию как на странице загрузки (или 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 и возникают проблемы с настройкой отображения: 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/

Кроме того, обратите внимание, что мой Fiddle использует CSS для автоматического скрытия #ident DIV. Я рекомендовал бы этот метод, чтобы избежать того, что пользователи, не являющиеся пользователями Windows, потенциально могут видеть флеш-память div на своем экране перед удалением кода.

источник

2015-11-18 22:23:25 skippr

Показать или скрыть div в зависимости от радиообмена (проверено/нет)

ответ

Смежные вопросы