能够在html中选择和取消选择多个元素并跟踪所选内容

时间:2016-06-21 13:46:44

标签: javascript jquery html

我的HTML模板将根据后端多次添加。所以,我想选择主题并发送所选元素的ID。怎么做? 现在我只能选择,之后我也不能选择它。 帮助!

我的Jquery代码选择:

$(document.body).click(function(evt){
  var clicked = evt.target;
  var currentID = clicked.id || "No ID!";

  document.getElementById(currentID).style.backgroundColor = "#00afbc";
  //$(clicked).html(currentID);
})

我的Html代码:

<div class="container-fluid" id="container-<%=no%>">

    <div id="circle" style="background:<%= colorCode %>;" class="col-xs-3">
        <div class="text" style="color:<%= textColor %>;">
            <%=p ercent %>
        </div>
        <div class="percent" style="color:<%= textColor %>;">%</div>
    </div>

    <div id="sideText">
        <div class="checkbox col-xs-9 everything-checkbox">
            <!--input type="checkbox" class="toggle" /-->
            <div id="currentID">
                <%=currentID %>
            </div>

            <div id="question">
                <%=t otalQues %> Questions Attempts
            </div>

        </div>
    </div>

</div>
<hr style="width: 100%; color: #d9d9d9; height: 1px; background-color:#d9d9d9; margin-top:0px;margin-bottom:0px;" />

1 个答案:

答案 0 :(得分:0)

您只需添加和删除课程即可跟踪所选项目,然后只需获取所有具有ID的所选项目

$(document).ready(function () {
    $(document.body).click(function (evt) {
        var clicked = evt.target;
        if (!$(clicked).hasClass('selected')) {
            $(clicked).addClass('selected');
            $(clicked).css('background-color', '#00afbc');
        } else {
            $(clicked).removeClass('selected');
            $(clicked).css('background-color', '');
        }
    });
});

function getSelected() {
    var ids = [];
    $('.selected').each(function () {
        var id = $(this).attr('id');
        if (id) {
            ids.push($(this).attr('id'));
        }
    });
    return ids;
}