javascript - 切换按钮和选择框

Question

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

    });
});
</script>

...

<td>
    <select id="selectBox" name="selectBox">
    <option value="R01"> REQUESTED </option> 
    <option value="R02"> NOT FINISHED </option> 
    <option value="R03"> FINISHED </option> 
</td>       

<td>
<a href="#"  class="btnA" id= "BUTTON_1" value="N">UNCHECKED</a> 
<a href="#"  class="btnA" id= "BUTTON_2" value="N">UNCHECKED</a> 
<a href="#"  class="btnA" id= "BUTTON_3" value="N">UNCHECKED</a> 
</td>

...

<div>
<a id="fnModEncProc" class="btnB"><strong>SAVE YOUR WORK</strong></a>
</div>  

因此，当我第一次打开页面时，我有一个选择框、3 个按钮和“保存”按钮。

选择框有 3 个选项(默认为请求)

1. 当我点击每个“UNCHECKED”按钮时，我希望它切换到“CHEKCED”。 (与按钮_2,3相同)
2. 当只有一两个按钮被检查时 -> 然后在选择框中选择完成 -> 然后单击“保存您的工作”

然后应该弹出警告框，其中包含“必须单击所有三个按钮才能完成”文本。

++ 简而言之，当选中一两个时，单击保存按钮时，选择框选项应选择为未完成。

但是，当所有内容均已检查时，单击保存按钮时，选择框选项应选择为已完成。

有人可以帮我编码吗？

Answer 1

fiddle Demo

$('.btnA').click(function (e) {
    e.preventDefault();
    var txt = $(this).text();
    txt = (txt == 'UNCHECKED') ? 'CHECKED' : 'UNCHECKED'; //toggle text
    $(this).text(txt);
});
$('#selectBox').change(function () {
    if (this.value === 'R03') {
        var len = $('.btnA').filter(function () {
            return $(this).text() === 'CHECKED'
        }).length; //get length of button with text CHECKED
        if (len !== 3) {
            $(this).val('R01'); //set value first to drop-down list
            alert('All three buttons must be clicked in order to be FINISHED');
        }
    }
});
$('#fnModEncProc').click(function () {
    $('#selectBox').change();
    var len = $('.btnA').filter(function () {
        return $(this).text() === 'CHECKED'
    }).length; //get length of button with text CHECKED
    if (len === 3) $('#selectBox').val('R03'); //if length = 3 select FINISHED in drop-down list
});

<小时/> Updated fiddle Demo

$('.btnA').click(function (e) {
    e.preventDefault();
    var txt = $(this).text(),
        val;
    if (txt === 'UNCHECKED') {
        txt = 'CHECKED';
        val = 'Y';

    } else {
        txt = 'UNCHECKED';
        val = 'N';
    }
    $(this).text(txt).prop('value', val); //set value to val
});