changing the value using javascript or jquery..is it even possible?

Question

hi I am looking for a way to change the value what I passed to function once a button is pressed

<span id="showHidden" style=" margin-left:726px; position:relative; top:40;">
        <input type="image" id="btnShowHidden" src/images/hide.gif" onclick="showHiddenRecords(1);" />
        </span>  

As you see in showHiddenRecords, its passing a value of 1. What I want is to toggle these value every time a user clicks the image. so if its one it will change to zero and if its zero it will chnage back to one. Is this possible? how?

e.g; showHiddenRecords(1) showHiddenRecords(0)

Answer 1

You can do it like this:

$(function() {
  $("#btnShowHidden").click(function() {
    this.value = this.value == "1" ? "0" : "1";
  });
});

Then you can remove the in-line functions all-together.

If you want to toggle something else, you can use .toggle(), like this:

$(function() {
  $("#btnShowHidden").toggle(function() {
    showHiddenRecords(1);
  }, function() {
    showHiddenRecords(0);
  });
});

Answer 2

Remove onclick="showHiddenRecords(1);" from the input tag, then add in this jQuery in $(document).ready();:

$("#btnShowHidden").toggle(function(){showHiddenRecords(1);},function(){showHiddenRecords(0);});

This uses jQuery's toggle function to do things on alternate clicks

Answer 3

I assume you have some hidden records on page?

In jQuery you can use the toggle function to handle this...

<div></div>
<div class="hiddenrecord"></div>
<div></div>
<div></div>
<div class="hiddenrecord"></div>
<div class="hiddenrecord"></div>

<span id="showHidden" style=" margin-left:726px; position:relative; top:40;">
        <input type="image" id="btnShowHidden" src/images/hide.gif" onclick="$('.hiddenrecord').toggle();" />
</span>