Question

我正在整理一个关于使用bootstrap和分段单选按钮（多组）的演示文稿，我想展示一种最好的方法来捕获不仅是单选按钮值而且来自它的组的值。我已经把一个非常简单的例子放在一起，并发布了一个小提琴。

基本上，我正在捕捉单选按钮更改事件中的信息。我所有的朋友都会嘲笑我，因为有一个更好的方法可以用bootstrap做到这一点吗？欢迎提出所有建议，因为我想确保我在演示文稿中展示了一个非常好的方法。

小提琴：https://jsfiddle.net/pkellner99/DTcHh/26735/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="all-sessions">
        <div class="btn-group professional-session" data-toggle="buttons" data-sessionid="101">
            <b>Session 101</b>
            <label class="btn btn-primary active">
                <input checked="checked" name="session-interest-101" type="radio" value="NoInterest" /> NoInterested
            </label>
            <label class="btn btn-primary">
                <input name="session-interest-101" type="radio" value="Interested" /> Interested
            </label>
        </div>
        <br /><br />
        <div class="btn-group professional-session" data-toggle="buttons" data-sessionid="102">
            <b>Session 102</b>
            <label class="btn btn-primary active">
                <input checked="checked" name="session-interest-102" type="radio" value="NoInterest" /> NoInterested
            </label>
            <label class="btn btn-primary">
                <input name="session-interest-102" type="radio" value="Interested" /> Interested
            </label>
        </div>
    </div>
    <script type="text/javascript">
        $(document)
            .ready(function () {
                $('input')
                    .change(function () {
                        console.log(' sessionId: ' + $(this).parent().parent().attr('data-sessionid'));
                        console.log(' val:       ' + $(this).val());
                    });
            });
    </script>
</body>
</html>

寻找最佳实践的方法从引导程序的分组单选按钮列表中获取价值

0 个答案: