CODEWITHSUNDEEP
jquerycssbutton
user2239220
user2239220

Reputation: 13

JQuery: Change Buttons behavior

I am new to jquery and having issues making a function which does the following.

I have table with three rows and four columns each. Inside each column, I have a button with a seperate css for hover effects. The idea of each button is to show their value in a textbox when the button is pressed.

I have tried different ways to do the following but have been unsuccessful.

  1. Change the css of the pressed button (say change color to red) and make all the other buttons change back to original color (say yellow).
  2. add the value of the button in the text box.

It is an aspx page so I even tried getting the value by calling the target if of the button. for example:

JS:

//Div Specific Function
$("#step1").click(function (e) {
    var thisID = e.target.ty;
    $('#input').data('btnType', 'Amount').each(function () {
        $(this).toggleClass('button');
    })

    $(thisID).toggleClass('button-hover');

});

html

<table cellpadding="10" cellspacing="0" width="90%">
 <tr>
  <td>
   <input type="button" data-btnType="Amount" id="btn50" runat="server" value=" $50" Text="$50"  class="button" />
  </td>
  <td>
   <input type="button" data-btnType="Amount" id="btn100" runat="server" value="$100" Text="$100" class="button"  />
  </td>
  <td>
   <input type="button" data-btnType="Amount" id="btn150" runat="server" Text="$150" value="$150" class="button"  />
  </td>
  <td>
   <input type="button" data-btnType="Amount" id="btn200" runat="server" Text="$200" value="$200" class="button"  />
  </td>
 </tr>
</table>

How can I make these buttons act like a radio effect. Please note that there are 10 buttons in all in this div.

Regards.

Upvotes: 1

Views: 1063

Answers (2)

mehdi
mehdi

Reputation: 1755

$(".button").click(function () {
    $(".red").removeClass("red").addClass("yellow"); // remove the prev pressed button class
    $(this).removeClass("yellow").addClass("red");      // add the red css class to  pressed button
    $(".button").not(".red").addClass("yellow"); // add to all other buttons yellow class
    $("#textBox").val($(this).val());    // get val of pressed button val
});

Upvotes: 1

freshbm
freshbm

Reputation: 5632

You can try this:

$("table :button").click(function() {
  $("table :button").removeClass("selected").addClass("unselected");
  $(this).removeClass("unselected").addClass("selected");
  $("#textBox").val($(this).val());
});

// I have changed your html little, added class unselected in your html code

jsfiddle example:

http://jsfiddle.net/k3J2r/

Upvotes: 0

Related Questions