CODEWITHSUNDEEP
javascriptjqueryjsp
user2470075
user2470075

Reputation: 169

How to toggle button with value

I have 3 buttons with Y/N values. And 1 select box. Following is the JSP code.

JSP

<script type="text/javascript">
$(document).ready(function() {
$('#BUTTON_1').on('click', function() {

    alert("### BUTTON_1=> " + $('#BUTTON_1').val());

});
});


<td>
    <td>
        <select id="selectBox" name="selectBox">
        <option value="R01"> NOT FINISHED </option> 
        <option value="R02"> FINISHED </option> 
    </td>       
</td>
<td>
    <a href="#"  class="btnA" id= "BUTTON_1" value="N">BUTTON 1</a> 
    <a href="#"  class="btnA" id= "BUTTON_2" value="N">BUTTON 2</a> 
    <a href="#"  class="btnA" id= "BUTTON_3" value="N">BUTTON 3</a> 
</td>

I have 2 questions.

1) How to code so that when I click on BUTTON 1, it toggles to name BUTTON 1_Y with value Y?

2) Only when all three buttons are toggled, so their values all change to Y, the 'FINISHED' option in select box appears. When not all three buttons have been clicked, or toggled, their values still remain as N and only NOT FINISHED option appears.

Im stuck on this for hours. Can anyone help me out?

Upvotes: 0

Views: 1986

Answers (4)

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

Use the following javascript 

$('#BUTTON_1').on('click', function() {
   if($(this).html().indexOf('Y') == -1 ) { // check if already clicked or not
     $(this).html($(this).html() + '_Y');
     $(this).val('Y');
     checkSelected();
  }
}); //add other button same like this

var checkSelected = function () {
    var toggle = true;
    $('.btnA').each(function () {         
        if($(this).val() === 'N') { toggle = false; }
    });
    if(toggle) {
        $('option.finished').prop('selected', true);
    }
}

Check http://jsfiddle.net/raunakkathuria/Ss8a9/1/

updated html added classes to options

 <option value="R01" class="notfinished"> NOT FINISHED </option> 
 <option value="R02" class="finished"> FINISHED </option>

Upvotes: 0

Chickenrice
Chickenrice

Reputation: 5727

You could try this:

JSFiddle DEMO

JS

$(function(){
    $(".btnA").click(function(){
      if($(this).attr("value")==="N"){
        $(this).attr("value","Y");
        $(this).html($(this).html()+"_Y");
      }else{
        $(this).attr("value","N");
        $(this).html($(this).html().replace("_Y",""));
      }

      var $option = $("#selectBox option");
      //check if all button are toggled
      if($('.btnA[value="N"]').length===0){    
          $option.val("R02");
          $option.html("FINISHED");
      }else{
          $option.val("R01");
          $option.html("NOT FINISHED");
      }
  });
});

HTML

<select id="selectBox">
 <option value="R01">NOT FINISHED</option>
</select>
<a href="#"  class="btnA" id= "BUTTON_1" value="N">BUTTON 1</a> 
<a href="#"  class="btnA" id= "BUTTON_2" value="N">BUTTON 2</a>
<a href="#"  class="btnA" id= "BUTTON_3" value="N">BUTTON 3</a>

Upvotes: 1

HDT
HDT

Reputation: 2047

try it

    $(document).ready(function(){
    $(".btnA").click(function(){
        if($(this).attr("value")=="Y"){
            $(this).attr({"value":"N"})
        }else{
            $(this).attr({"value":"Y"})
        }
        var boolStatus = true;
        $.each($(".btnA"),function(i,item){
            if($(item).attr("value")=="N")
                boolStatus = false;
        });
        if(boolStatus){
            $("#selectBox").val("R02");
        }else{
            $("#selectBox").val("R01");
        }
    });
});

Or see demo jsfiddle.net/xccbV/1/

Upvotes: 0

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

So all you need to Do is:

JAVASCRIPT:

$(document).ready(function() {
    $allToggled = 0;
    $('.btnA').on('click', function() {
        if($(this).val() == 'N'){
            $(this).val('Y');
            $allToggled++
        }
        else if($(this).val() == "Y"){
            $(this).val("N")
            $allToggled--;
        }

        if($allToggled == $(".btnA").length()){ // length making sure this is done for as may buttons you have by the same class name
            $("#selectBox").val("R02").trigger("change"); // Note that trigger is written so that you may use the native event at later stage.
        }
    });
});

HTML:

<td>
    <td>
        <select id="selectBox" name="selectBox">
        <option value="R01"> NOT FINISHED </option> 
        <option value="R02"> FINISHED </option> 
    </td>       
</td>
<td>
    <a href="#"  class="btnA" id= "BUTTON_1" value="N">BUTTON 1</a> 
    <a href="#"  class="btnA" id= "BUTTON_2" value="N">BUTTON 2</a> 
    <a href="#"  class="btnA" id= "BUTTON_3" value="N">BUTTON 3</a> 
</td>

Upvotes: 0

Related Questions