如何使用下拉列表手动切换单选按钮

Question

我使用Bootstrap创建了两个单选按钮，第一个只有一个标签，第二个有一个包含名称的下拉列表。如果用户打开列表并选择一个名称，我想使用jquery来更新单选按钮，但我无法弄清楚如何实现它。这是jsfiddle显示我的内容。

如果你能取消选中他们可能选择的所有学生的话，你可以告诉我如何重新选择第一个选项，以获得奖励积分！

<div class="col-xs-4">
    <label>Students to Export:</label>
</div>
<div class="col-xs-4">
    <label class="radio-inline">
        <input checked="checked" name="expStudents" type="radio" previousvalue="checked"> This Student Only
    </label>
</div>
<div class="col-xs-4">
    <label class="radio-inline">
        <input name="expStudents" type="radio" previousvalue="false">
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="glyphicon glyphicon-user"></span>&nbsp;Multiple Students&nbsp;<span class="caret"></span>
            </button>
            <ul id="ddStudents" class="dropdown-menu" style="width:300px; max-height: 400px; overflow-y: scroll" onclick="radioToggle();">
                <li>&nbsp;
                    <input type="checkbox" class="ddStudents" id="inpStudent1055469" value="1055469 " onclick="ddInputsChanged('#ddStudents input', '#inpStudent0');">
                    <label for="inpStudent1055469" class="input small dropdownLabel_NormalFont">Student 1</label>
                </li>
               <li>&nbsp;
                   <input type="checkbox" class="ddStudents" id="inpStudent906219" value="906219 " onclick="ddInputsChanged('#ddStudents input', '#inpStudent0');">
                   <label for="inpStudent906219" class="input small dropdownLabel_NormalFont">Student 2</label>
               </li>
              <li>&nbsp;
                  <input type="checkbox" class="ddStudents" id="inpStudent852554" value="852554 " onclick="ddInputsChanged('#ddStudents input', '#inpStudent0');">
                 <label for="inpStudent852554" class="input small dropdownLabel_NormalFont">Student 3</label>
              </li>
          </ul>
    </label>
</div>

function radioToggle(val) {
    $('input[name=expStudents]').click(function () {
        if ($(this).attr('previousValue') == 'true') {
            $(this).attr('checked', false)
        } else {
            $('input[name=expStudents]').attr('previousValue', false);
        }

        $(this).attr('previousValue', $(this).attr('checked'));
    });
}

Answer 1

我已将id添加到您的两个单选按钮中。

$('input[type="checkbox"]').change(function() {
        var check = 0;
        $('input[type="checkbox"]').each(function () {
            if(this.checked) {
                check++;
            }
        });
       if (check == 0) {
           $('#onlyStudent').prop('checked', true);
       }else if (check > 0) {
           $('#moreStudents').prop('checked', true);
       }
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-4">
    <label>Students to Export:</label>
</div>
<div class="col-xs-4">
    <label class="radio-inline">
        <input checked="checked" id="onlyStudent" name="expStudents" type="radio" previousvalue="checked"> This Student Only
    </label>
</div>
<div class="col-xs-4">
    <label class="radio-inline">
        <input name="expStudents" id="moreStudents" type="radio" previousvalue="false">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            <span class="glyphicon glyphicon-user"></span>&nbsp;Multiple Students&nbsp;<span class="caret"></span>
        </button>
        <ul id="ddStudents" class="dropdown-menu" style="width:300px; max-height: 400px; overflow-y: scroll">
            <li>&nbsp;
                <input type="checkbox" class="ddStudents" id="inpStudent1055469" value="1055469 ">
                <label for="inpStudent1055469" class="input small dropdownLabel_NormalFont">Student 1</label>
            </li>
            <li>&nbsp;
                <input type="checkbox" class="ddStudents" id="inpStudent906219" value="906219 ">
                <label for="inpStudent906219" class="input small dropdownLabel_NormalFont">Student 2</label>
            </li>
            <li>&nbsp;
                <input type="checkbox" class="ddStudents" id="inpStudent852554" value="852554 ">
                <label for="inpStudent852554" class="input small dropdownLabel_NormalFont">Student 3</label>
            </li>
        </ul>
    </label>
</div>

Answer 2

如果您只需要根据复选框的选中状态切换单选按钮，您可以：

• 删除内联事件处理程序：onclick =“radioToggle（）;”
• 为复选框添加更改事件：如果选中至少一个复选框，则将收音机切换为当前一个，否则切换到另一个。

$('#ddStudents :checkbox').on('change', function (e) {
    var currRadio = $(this).closest('.radio-inline').find('[name="expStudents"]');
    if ($('#ddStudents :checkbox:checked').length > 0) {
        currRadio.prop('checked', true);
    } else {
        $('[name="expStudents"]').not(currRadio).prop('checked', true);
    }
});

function ddInputsChanged () {
     ;  // only for demo
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-xs-4">
    <label>Students to Export:</label>
</div>
<div class="col-xs-4">
    <label class="radio-inline">
        <input checked="checked" name="expStudents" type="radio" previousvalue="true"> This Student Only
    </label>
</div>
<div class="col-xs-4">
    <label class="radio-inline">
        <input name="expStudents" type="radio" previousvalue="false">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
                aria-expanded="false">
            <span class="glyphicon glyphicon-user"></span>&nbsp;Multiple Students&nbsp;<span class="caret"></span>
        </button>
        <ul id="ddStudents" class="dropdown-menu" style="width:300px; max-height: 400px; overflow-y: scroll">
            <li>&nbsp;
                <input type="checkbox" class="ddStudents" id="inpStudent1055469" value="1055469 "
                       onclick="ddInputsChanged('#ddStudents input', '#inpStudent0');">
                <label for="inpStudent1055469" class="input small dropdownLabel_NormalFont">Student 1</label>
            </li>
            <li>&nbsp;
                <input type="checkbox" class="ddStudents" id="inpStudent906219" value="906219 "
                       onclick="ddInputsChanged('#ddStudents input', '#inpStudent0');">
                <label for="inpStudent906219" class="input small dropdownLabel_NormalFont">Student 2</label>
            </li>
            <li>&nbsp;
                <input type="checkbox" class="ddStudents" id="inpStudent852554" value="852554 "
                       onclick="ddInputsChanged('#ddStudents input', '#inpStudent0');">
                <label for="inpStudent852554" class="input small dropdownLabel_NormalFont">Student 3</label>
            </li>
        </ul>
    </label>
</div>