チェックボックスのテキストを変更しないでください

-2

以下は私のコードです。チェックボックスをオンにすると、テキストは変更されません。チェックボックスのテキストは変更する必要がありますが、変更する必要はありません。チェックボックスのテキストを変更しないでください

<html> 
<head> 
<title>OX</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$('#checkbox1').on('change', function() { 
     window.alert(5 + 6); 
    if ($('#checkbox1').is(':checked')) { 
      window.alert(5 + 6); 
     $("#description").html("Your Checked 1"); 

    } else { 
     $("#description").html("No check"); 
    } 
}); 

</script> 
</head> 
<body> 

<input type="checkbox" value="0" id="checkbox1" name=""/> Answer one <br/></input> 
<span id="description"> Hi Your Text will come here </span> 
</body> 
</html>

出典

2016-07-14 Sujay Venaik

の要素が存在する前に、コードを実行しています。 $（document）.readyを見て、DOMが用意されるまでコードが起動しないようにしてください。https://learn.jquery.com/using-jquery-core/document-ready/ –

またはJSコードを下に移動してくださいHTML – Zak

また、['']（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input）は[空の要素]です（https： mozilla.org/en-US/docs/Glossary/empty_element）、子ノードを含めることはできません。無効な「」タグの代わりに、['']（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label）要素を使用することをお勧めします。 MDNの["Simple label example"（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Simple_label_example）を参照してください。 – showdev

使用編集コード

$(document).ready機能にbodyタグの終了前にJqueryや他のJS frameworksのほとんどをロードし、すべてのJqueryコードをバインドするために使用しよう：何が起こっている

<html> 
<head> 
<title>OX</title> 
</head> 
<body> 

<input type="checkbox" value="0" id="checkbox1" name=""/> 
<label for="">Answer one</label> <br/> 

<span id="description"> Hi Your Text will come here </span> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#checkbox1').on('change', function() { 
     window.alert(5 + 6); 
     if ($('#checkbox1').is(':checked')) { 
       window.alert(5 + 6); 
      $("#description").html("Your Checked 1"); 

     } else { 
      $("#description").html("No check"); 
     } 
    }); 
}); 

</script> 

</body> 
</html>

出典

2016-07-14 18:42:34

あなたのスクリプトは、DOMがロードされる前に動作しようとしているということです。あなたはまだページにロードされていないチェックボックスをどうやって捉えることができますか？簡単な解決策は、$(document).ready()のようなdocument.readyハンドラを使用することです。

私は以下のコードを追加した実例があります。それを実行して見てください。

<html> 
 

 
<head> 
 
    <title>OX</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#checkbox1').on('change', function() { 
 
     window.alert(5 + 6); 
 
     if ($('#checkbox1').is(':checked')) { 
 
      window.alert(5 + 6); 
 
      $("#description").html("Your Checked 1"); 
 

 
     } else { 
 
      $("#description").html("No check"); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <input type="checkbox" value="0" id="checkbox1" name="" />Answer one 
 
    <br/> 
 
    </input> 
 
    <span id="description"> Hi Your Text will come here </span> 
 
</body> 
 

 
</html>

出典

2016-07-14 19:47:21 Iceman

チェックボックスのテキストを変更しないでください

答えて

関連する問題