如何使用JavaScript或jQuery撤销单选按钮选择

How to undo a radio button selection using JavaScript or preferably jQuery

本文关键字：单选按钮 选择 jQuery 何使用 JavaScript      更新时间：2023-09-26

我正在使用一组单选按钮选择的场景。要求是只能选择2个。所以，如果第三条也被选中了"Yes"，我想把它恢复为"No"

此外，我还想知道我是否可以检查是否在一个组内的单选按钮的给定索引被检查，而不是这样做:"($().(:检查),,$(this).val() == 'Y')"

jsFiddle链接:http://jsfiddle.net/pshah331/S8qep/

HTML: 

<p>Folder A:
    <input type="radio" name="folder_A" value="Y" onclick="folderSelectionChanged()" />Yes
    <input type="radio" name="folder_A" value="N" onclick="folderSelectionChanged()" />No</p>
<p>Folder B:
    <input type="radio" name="folder_B" value="Y" onclick="folderSelectionChanged()" />Yes
    <input type="radio" name="folder_B" value="N" onclick="folderSelectionChanged()" />No</p>
<p>Folder C:
    <input type="radio" name="folder_C" value="Y" onclick="folderSelectionChanged()" />Yes
    <input type="radio" name="folder_C" value="N" onclick="folderSelectionChanged()" />No</p>
<div id="update"></div>

JavaScript in "HEAD":

function folderSelectedYesCount() {
    var yesCount = 0;
    var folderRadioGroups = $("input[name^='folder_']");

    folderRadioGroups.each(function () {
        // TODO:  Would like to check by index --> "index 0 is selected/checked"
        if ($(this).is(':checked') && $(this).val() == 'Y') {
            yesCount++;
        }
    });
    return yesCount;
}
function folderSelectionChanged() {
    // TODO:  If count of Yes is greater than 2, then change the last clicked to "No"
    /*
    if (folderSelectedYesCount() > 1){
        $(this)[1].prop('checked', true);
    }
    */
    $('#update').html('Selection count for "Yes" is <b>' + folderSelectedYesCount() + ' </b>');
}

我已经更新了您的jsfield，请查看:-

function folderSelectionChanged(e) {
    if(folderSelectedYesCount()>2){
        $(e).siblings().prop("checked",true);         
    }
    $('#update').html('Selection count for "Yes" is <b>' + folderSelectedYesCount() + ' </b>');
}

点击这里:-http://jsfiddle.net/S8qep/47/

谢谢

更改了html，以便folderSelectionChanged函数可以将this作为参数来处理以下事件:

if(folderSelectedYesCount() > 2){
    $(obj).prop('checked', false);
    $(obj).next().prop('checked', true);
}

小提琴

相关文章：