Jquery - ラジオボタンの選択が解除されていません

別のラジオボタンが選択されている場合は、ラジオボタンの選択を解除しようとしています。以下は、私のコードはJquery - ラジオボタンの選択が解除されていません

Page1.jspを

<head> 
<title>Page 1</title> 
<%@include file="../commons/styles.jsp"%> 
</head>

styles.jspはjqueryのスクリプト

<script src="../assets/plugins/jquery/jquery-2.1.4.min.js"></script>

/*いくつかの他のコード*/

<div class="contentTab"> 
    <jsp:include page="profileTab.jsp"> 
    <jsp:param name="type" value="R"/> 
    <jsp:param name="role" value="<%=role%>"/> 
</jsp:include> 
</div>

が含まれていますprofileTab.jsp

<input type="radio" id="main1" name="main" />Disappear 
<input type="radio" id="main2" name="main" />Appear 
<div id="subCheckButtons" style="opacity:0;"> 
    <input type="radio" id="sub1" name="sub" class="subCheck" />Hello 
</div> 

<script type="text/javascript"> 
document.getElementById("main2").addEventListener("click", function() 
{ 
    document.getElementById("subCheckButtons").style.opacity = 1; 
}, false); 
document.getElementById("main1").addEventListener("click", function() 
{ 
    document.getElementById("subCheckButtons").style.opacity = 0; 
    document.getElementById("sub1").checked = false; 
}, false); 
</script>

jsfiddleの作業：http://jsfiddle.net/FRFdk/390/

目的： "消える" ラジオボタンが選択されるたびに、選択解除 "こんにちは" ボタンを作ること。

しかし私がjspページで試したとき、 "Hello"ラジオボタンは選択解除されませんが、Jsfiddleで動作します。

側注：私はprofileTab.jspにjQueryライブラリを含めるしようとした場合、それは動作しますが、その後、私のページのレイアウトやフォントが台無しにされます。

どのように解決するか？ありがとう

出典

2016-08-13 user1730935

ところで、こんにちはのためにラジオの代わりにチェックボックスを使用してみませんか？ – charsi

jspが動的にHTMLを読み込むので、ページが読み込まれる前にJavaScriptがバインドしようとしている可能性があります。このため、イベントは正しくバインドされていないため起動しません。

あなたはjqueryのを使用している場合は、jQueryの「ドキュメント準備」機能でイベントリスナーを入れたいと思います：

$(function() { 
    // code here... 
});

このページではJavaScriptを実行する前に完全にロードされているを確認します。

出典

2016-08-13 16:56:41 Jecoms

他のコードが動作しているので、 'document ready'はここでは問題になりません。 –

jsfiddleが静的なhtmlで動作し、jspを使用している彼のサイトが動作しないのは、最も簡単な理由です。 – Jecoms

Jquery - ラジオボタンの選択が解除されていません

答えて

関連する問題