Question

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

我有两个问题。

1）如何进行编码，以便当我点击BUTTON 1时，它会切换到名称BUTTON 1_Y，其值为Y？

2）只有当所有三个按钮都被切换时，它们的值全部变为Y，才会出现选择框中的'FINISHED'选项。如果未单击或切换所有三个按钮，则其值仍为N，仅显示NOT FINISHED选项。

我坚持了好几个小时。任何人都可以帮助我吗？

Answer 1

你可以试试这个：

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>

Answer 2

所以你需要做的就是：

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

Answer 3

试试吧

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

Answer 4

使用以下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);
    }
}

检查http://jsfiddle.net/raunakkathuria/Ss8a9/1/

更新了html添加的类到选项

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

如何切换按钮值

4 个答案: