Change image and text on checkbox and return back
I looked all over the place but didn't find an answer or understood. I want my image and text change to be checked and when unchecked it will go back. When I click on the icon, the image and text change, but do not return to the original.
$("#link_checkbox").click(function() {
$(".result_text").text("Inserts the contents of the file into your document and creates a shortcut to the source file.Changes to the source file will be reflected in your document.");
$('#picture').attr('src', 'image/result1.png');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first_checkbox">
<span>
<input type="checkbox" name="link_checkbox" id="link_checkbox" class="link_checkbox" value="link_checkbox" accesskey="k" />
</span>
<span class="first_checkbox_lbl">
<label for="link_checkbox">Lin<u>k</u> to file</label>
</span>
</div>
<span class="result_img">
<img id="picture" src="image/result.png" alt="result.png" />
</span>
<div class="result_text">Inserts the contents of the file into your document so that you can edit it later using the application which created the source file.</div>
+3
user8079593
source
to share
4 answers
You can condition like this if checkbox
set, and then replace the image / text, and if unchecked
replace it with the original.
$("#link_checkbox").click(function () {
if ($(this).is(":checked")) {
$(".result_text").text("Inserts the contents of the file into your document and creates a shortcut to the source file.Changes to the source file will be reflected in your document.");
$('#picture').attr('src', 'image/result1.png');
} else {
$(".result_text").text("Original text you want to add");
$('#picture').attr('src', 'image/original-file.png');
}
});
+1
source to share
Follow this jQuery code.
$("#link_checkbox").click(function(){
if($(this).is(":checked"))
{
$(".result_text").text("checked."); // Any text this just for testing.
$('#picture').attr('src', '{image path}');
}
else
{
$(".result_text").text("unchecked.");// Any text this just for testing.
$('#picture').attr('src', '{image path}');
}
});
0
source to share
you can make another div with new data you want to show with display: none; and whenever you click on something to change margins just hide the first div and show the other one (can be achieved with $ ('selector) .toggle ();)
<div class="div1">
<p>my text</p><img src="img.jpg>
</div>
<div class="div2" style="display:none;">
<p>my other text</p><img src="other_img.jpg>
</div>
$('selector').on('click', function(){
$('.div1, .div2).toggle();
}
0
source to share
$("#link_checkbox").click(function(){
if(document.getElementById("link_checkbox").checked == true)
{
$(".result_text").text("Inserts the contents of the file into your document and creates a shortcut to the source file.Changes to the source file will be reflected in your document.");
$('#picture').attr('src', 'image/result1.png');
}
else
{
$(".result_text").text("Inserts the contents of the file into your document so that you can edit it later using the application which created the source file.");
$('#picture').attr('src', 'image/result.png');
}
});
Try this code
0
source to share