选中复选框上的图像和文本更改并还原

Question

我到处都看，但找不到答案或无法理解。 我希望我的图像和文本更改选中复选框，当取消选中该复选框时，它将还原。当我单击复选框时，图像和文本会更改但不会还原为原始复选框。

 $("#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> 

Answer 1

如果checkbox ，则可以设置类似的条件，然后替换您想要的图像/文本，如果unchecked则将其替换为原始文件。

$("#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');
    }
});

Answer 2

遵循这个jQuery代码。

$("#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}'); 
            }
        });

Answer 3

您可以使用display：none显示要显示的新数据的另一个div; 每当你点击某些内容来改变字段时，只需隐藏第一个div并显示另一个div（可以使用$（'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();
}

Answer 4

$("#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'); 
    }
});

试试这个代码