如何获得点击的当前元素的ID

Question

I want to get the Value of the Current Element to be clicked. I have a list of Checkboxes and selection of each I want to get the ID of it which is hidden. My Code goes as follows:

$("#ModelListView").on("click", ".ModelCheckBox", function (element) {
    var AnalysisID = $("#AnalysisID").val();
    var ModelID = '';
});

HTML:

<div id="ModelListView"></div>
<script type="text/x-kendo-template" id="Modeltemplate">
    <div class="section group fr">
        <div class="col span_2_of_12">
            #if(ACTIVE_MODELS_COUNT > 0){# <input class="ModelCheckBox" type="checkbox"  checked/>#} else {# <input class="ModelCheckBox" type="checkbox" unchecked/>  #}#
        </div>
        <div class="col span_4_of_12"><label>#:MODEL#</label></div>
        <input id="Model_ID" type="hidden" value=#:MODEL_ID#/>
    </div>
  </script>

I want to get the Value of Model_ID that is kept hidden.

Answer 1

You can use $(this) and get the closest.

$(this) will be the element that's clicked.

.closest('.section.group') will return the " section group "-div. You might want to use #ModelListView instead of . section.group .

.find('#Model_ID').val() will return the value of the hidden field.

 $("#ModelListView").on("click", ".ModelCheckBox", function (element) { var AnalysisID = $("#AnalysisID").val(); var ModelID = $(this).closest('.section.group').find('#Model_ID').val(); alert(ModelID); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ModelListView"> <div class="section group fr"> <div class="col span_2_of_12"> <input class="ModelCheckBox" type="checkbox" checked/> </div> <div class="col span_4_of_12"><label>Label</label></div> <input id="Model_ID" type="hidden" value="someValue"/> </div> </div> 

Sidenote: be aware of using an ID in a template.