依靠单选按钮检查

Count on radio button check

本文关键字：检查 单选按钮 依靠      更新时间：2023-09-26

我有10组单选按钮，每组有2个值为Accept/Reject的单选按钮。一组中的2个单选按钮将具有相同的名称。

我的要求是：每当用户在设置计数器中选择单选按钮时，计数器应增加1。例如，如果用户在单选按钮组中选择接受，则计数器将增加一。如果他在第二组中再次选择接受，则计数器再次增加1。但是，如果他在第一个单选按钮组中更改拒绝的决定，则计数器不应增加。

我使用此计数器的原因是为了确定用户在提交表单之前有多少未保存的更改。此外，我不能在单选按钮上使用onchange事件，因为如果单选按钮已被选择为接受，而用户将其更改为拒绝，则不应增加计数器。但一旦发生变化，它就会发生。

以下是我的代码：

<input id="8adb94f9516be1ac01517097980900db" name="certItemIdRadio-8adb94f9516be1ac01517097980900db" value="Accept" type="radio">
<input id="8adb94f9516be1ac01517097980900db" name="certItemIdRadio-8adb94f9516be1ac01517097980900db" value="Reject" type="radio">
<input id="8adb94f9516be1ac01517097980900dc" name="certItemIdRadio-8adb94f9516be1ac01517097980900dc" value="Accept" type="radio">
<input id="8adb94f9516be1ac01517097980900dc" name="certItemIdRadio-8adb94f9516be1ac01517097980900dc" value="Reject" type="radio">
<input id="8adb94f9516be1ac01517097980900dd" name="certItemIdRadio-8adb94f9516be1ac01517097980900dd" value="Accept" type="radio">
<input id="8adb94f9516be1ac01517097980900dd" name="certItemIdRadio-8adb94f9516be1ac01517097980900dd" value="Reject" type="radio">
<input id="8adb94f9516be1ac01517097980900de" name="certItemIdRadio-8adb94f9516be1ac01517097980900de" value="Accept" type="radio">
<input id="8adb94f9516be1ac01517097980900de" name="certItemIdRadio-8adb94f9516be1ac01517097980900de" value="Reject" type="radio">

请提供建议。

如果不跟踪哪些按钮被更改，就无法解决问题。因此，每个无线电组都需要一个索引或id，你可以在这样的地图中跟踪它们：

var changedGroups = {}
function countChange(groupIndex) { // called from onchange
    changedGroups[groupIndex] = true;
}
function numberOfChanges() { // called when you need the number of changes
    var result = 0;
    for (index in changedGroups) result++;
    return result;
}

尝试：

$('input[type="radio"]').on('click',function(){
 $('.totleft').text($('input[type="radio"]:checked').length+'/'+($('input[type="radio"]').length/2))
});

https://jsfiddle.net/gvx3nL9p/

如果您使用JQuery，您可以使用以下逻辑。

var count = 0;
    $(document).ready(function(){
        $("input[type=radio]").on('change',function(){
            changedRadio(this);
        });
    });
    function changedRadio(clickedEle)
    {
        if( $(clickedEle).val() == "Accept" )
        {
            count++;
        }
        alert(count);
    }

这就是您需要做的

$('.counter').text($(':radio:checked').length);
$('input[type=radio]').change(function(){
  $('.counter').text($(':radio:checked').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1.
<input id="a" name="certItemIdRadio-8adb94f9516be1ac01517097980900db" value="Accept" type="radio">
<input id="b" name="certItemIdRadio-8adb94f9516be1ac01517097980900db" value="Reject" type="radio">
<br/>
2.
<input id="c" name="certItemIdRadio-8adb94f9516be1ac01517097980900dc" value="Accept" type="radio">
<input id="d" name="certItemIdRadio-8adb94f9516be1ac01517097980900dc" value="Reject" type="radio">
<br/>
3.
<input id="e" name="certItemIdRadio-8adb94f9516be1ac01517097980900dd" value="Accept" type="radio">
<input id="f" name="certItemIdRadio-8adb94f9516be1ac01517097980900dd" value="Reject" type="radio">
<br/>
4.
<input id="g" name="certItemIdRadio-8adb94f9516be1ac01517097980900de" value="Accept" type="radio">
<input id="h" name="certItemIdRadio-8adb94f9516be1ac01517097980900de" value="Reject" type="radio">
<br/><br/>
No. of Selected Options: <span class="counter"></span>

相关文章：