選擇複選框文本不變

-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代碼BELOW 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上的簡單標籤示例」]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Simple_label_example）。 – showdev

使用嘗試加載Jquery和大多數其他JS frameworks body標籤結束前和使用綁定所有Jquery代碼$(document).ready功能

編輯的代碼：

<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

選擇複選框文本不變

回答

相關問題