单选按钮以全日历显示事件

Question

这是HTML代码：

<label> <input type="radio" data-selector=".hospital-1"  class="calFilter toggle-events  " name="doctor" value="Doctor1" id="doctorOption1" style="background-color: blue"> Doctor 1 </label>&nbsp;
<label><input type="radio"  data-selector=".hospital-2"  class="calFilter toggle-events " name="doctor" value="Doctor2" id="doctorOption2"> Doctor 2</label> &nbsp;
<label><input type="radio"  data-selector=".hospital-3"  class="calFilter toggle-events " name="doctor" value="Doctor3" id="doctorOption3"> Doctor 3</label> &nbsp;
<label> <input type="radio" data-selector=".hospital-4"  class="calFilter toggle-events " name="doctor" value="Doctor4" id="doctorOption4"> Doctor 4 </label> &nbsp;

然后是它的javascript：

$（函数（）{

    $('[class*="hospital-"]').show();

    $('.toggle-events').on('click', function (e) {
        var $input = $(e.target);
        var $targets = $($input.attr('data-selector'));
        if ($input.is(':checked')) {
            $targets.show().removeClass('hidden');

        } else {
            $targets.hide().addClass('hidden');

        }

    });

这是针对日历javascript的：

    /* initialize the external events
     -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function() {

        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 1111999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });


    /* initialize the calendar
     -----------------------------------------------------------------*/
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();



    $('#calendar').fullCalendar({


        dayClick: function(date, allDay, jsEvent, view) {


                $('#calendar').fullCalendar('gotoDate', date);
                $('#calendar').fullCalendar('changeView', 'agendaDay');

        },
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true,
                $(this).remove();
            }
        },
        events: [


            {
                title: 'Doctor 3  [12]',
                start: new Date(y, m, 1),
                backgroundColor: "#00FFFF",
                borderColor: "#000000" ,
                className: 'hospital-3',

            },
            {
                title: 'Doctor 4  [12]',
                start: new Date(y, m, 1),
                backgroundColor: "orange",
                borderColor: "#000000",
                className: 'hospital-4'
            },
            {
                title: 'doctor 5  [32]',
                start: new Date(y, m, 8),

                backgroundColor: "red",
                borderColor: "#000000",
                className: 'hospital-5'
            },
            {
                title: 'doctor 5  [32]',
                start: new Date(y, m, 7),

                backgroundColor: "red",
                borderColor: "#000000",
                className: 'hospital-5'
            },
            {
                title: 'Doctor 1  [12]',
                start: new Date(y, m, 10),
                backgroundColor: "#blue",
                borderColor: "#000000",
                className: 'hospital-1'
            },
            {
                title: 'Doctor 2  [12]',
                start: new Date(y, m, 10),
                backgroundColor: "green",
                borderColor: "#000000",
                className: 'hospital-2'
            },
            {
                title: 'Doctor 3  [12]',
                start: new Date(y, m, 10),
                backgroundColor: "#00FFFF",
                borderColor: "#000000",
                className: 'hospital-3'
            },
            {
                title: 'Doctor 1  [12]',
                start: new Date(y, m, 13),
                backgroundColor: "#blue",
                borderColor: "#000000",
                className: 'hospital-1'
            },
            {
                title: 'Doctor 2  [12]',
                start: new Date(y, m, 13),
                backgroundColor: "green",
                borderColor: "#000000",
                className: 'hospital-2'
            },
            {
                title: 'Doctor 3  [12]',
                start: new Date(y, m, 13),
                backgroundColor: "#00FFFF",
                borderColor: "#000000",
                className: 'hospital-3'
            },
            {
                title: 'Doctor 4  [12]',
                start: new Date(y, m, 13),
                backgroundColor: "orange",
                borderColor: "#000000",
                className: 'hospital-4'
            },
            {
                title: 'Doctor 1  [12]',
                start: new Date(y, m, 14),
                backgroundColor: "#blue",
                borderColor: "#000000",
                className: 'hospital-1'
            },
            {
                title: 'Doctor 2  [12]',
                start: new Date(y, m, 14),
                backgroundColor: "green",
                borderColor: "#000000",
                className: 'hospital-2'
            },
            {
                title: 'Doctor 3  [12]',
                start: new Date(y, m, 14),
                backgroundColor: "#00FFFF",
                borderColor: "#000000",
                className: 'hospital-3'
            },






        ],


    });


});

如果我将类型更改为复选框，但是我需要使用单选按钮，它会起作用，谢谢您的帮助

Answer 1

尝试这个：

$('.toggle-events').on('click', function (e) {
    var $input = $(e.target);
    console.log($input); // returns object with length of 1
    //var $targets = $($input.attr('data-selector'));
    var s = $('input[name=doctor]:checked');
    console.log(s); //returns only 1 object with selector.
    if(s.is(':checked')){
        console.log('worked');
        // your code here
    } else {}
});

我离开了$ input变量，但我认为您不需要它。 另外，如果您需要选定值，请使用s.val（）获得该值。 希望这能使您走上正确的道路。 我建议使用eventRender隐藏/显示事件。 使用FullCalendar中的信息在单个过滤器问题中选择多个事件以帮助构建代码。