如何手动切换带下拉列表的单选按钮

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>