Как переключить кнопку со значением

У меня есть 3 кнопки со значениями Y/N. И 1 выберите поле. Ниже приведен код JSP.Как переключить кнопку со значением

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>

У меня есть 2 вопроса.

1) Как закодировать, чтобы при нажатии кнопки BUTTON 1 он переключился на название BUTTON 1_Y со значением Y?

2) Только когда все три кнопки переключаются, поэтому их значения меняются на Y, появляется опция «ЗАВЕРШЕНА» в окне выбора. Когда не все три кнопки были нажаты или переключены, их значения остаются неизменными как N, а опция «НЕ ЗАВЕРШЕНА» появляется.

Я застрял на этом в течение нескольких часов. Может кто-нибудь мне помочь?

источник

2013-12-23 user2470075

вы можете не сделать это только с JavaScript? –

Думаю, вы можете. Я должен был спросить javascript. Я только что редактировал название – user2470075

Вы можете попробовать это:

JSFiddle DEMO

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

источник

2013-12-23 03:08:27 Chickenrice

Так все, что вам нужно сделать, это:

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>

источник

2013-12-23 03:05:10

попробовать это

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

Или посмотреть демо jsfiddle.net/xccbV/1/

источник

2013-12-23 03:07:44 HDT

Используйте следующие javascri пт

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

Проверить http://jsfiddle.net/raunakkathuria/Ss8a9/1/

обновленный HTML добавлены классы для опций

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

источник

2013-12-23 03:08:29

Как переключить кнопку со значением

ответ

Смежные вопросы