Question

我到处寻找，但找不到答案或无法理解答案。我希望我的图片和文字更改选中复选框，当取消选中该复选框时，它会恢复原状。当我点击复选框时，图片和文字会发生变化，但不会恢复原状。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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（可以用$（＆＃39;选择器）.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'); 
    }
});

试试此代码

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

4 个答案: