選中復選框上的圖像和文本更改並還原

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'); 
    }
});

試試這個代碼