如何使用jQuery获取HTML元素ID
[英]How to get html element id using jquery
问题描述
I am need to get the id before and after html element of dropdown list on change. 
我需要在更改下拉列表的html元素之前和之后获取ID。 Please see blow source code. 请参阅打击源代码。
When Fund name selected I need to get the previous selected checkbox id or name ( Cash / Epf ) & after selected checkbox id or name ( No.of Units Reedem / Amount Reedem / All units) . 选择基金名称后，我需要获取之前选择的复选框ID或名称（现金/ Epf）和选择的复选框ID或名称之后的名称（Reedem单位数量/ Reedem金额/所有单位） 。
Thanks in advance. 提前致谢。
$(document).ready(function () { $('.units').change(function () { alert($(this).attr('id')); alert($(this).before().parent().parent().html()); }); });
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <div class="setup-content" id="form-3"> <div id="repurchase"> <div class="lblHead">REPURCHASE REQUEST</div> <div class="form-group"> 1.<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk11" value="CashPlan" class="singlecheckbox plan" /><label for="fm3chk11">Cash Plan</label> <input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk12" value="EPFPlan" class="singlecheckbox plan" /><label for="fm3chk12">EPF Plan</label> </div> <div class="form-group"> <div class="col-lg-6"> <label>Fund Name</label> <select id="fundId" class="form-control drplst units" AppendDataBoundItems="true"> <option Value=""></option> <option Value="123">123</option> <option Value="369">369</option> </select> </div> <div class="col-lg-6"> <div class="clearfix"></div> <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label> <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label> <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label> <asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox> </div> <div class="clearfix"></div> </div> </div> </div>
2 个解决方案
解决方案1
1 2015-08-25 02:29:57
Try this : 尝试这个 ：
$(document).ready(function () {
$('.units').change(function () {
alert($(this).closest('.form-group').prev().find('.singlecheckbox:checked').attr('id'));
alert($(this).parent().next().find('.singlecheckbox:checked').attr('id'));
});
});
This is working for single checked box, if more than one checkbox was chekced, you need to iterate that and doing something with that. 这适用于单个复选框，如果选中了多个复选框，则需要对其进行迭代并对此进行处理。
解决方案2
0 已采纳 2015-08-25 02:58:35
Assuming your plans are mutually exclusive, you would want radio buttons to represent them, unless that F3m... indicates some JS framework that would turn appropriately decorated checkboxes into mutually exclusive selections. 假设您的计划是互斥的，那么您将希望单选按钮来表示它们，除非F3m...表示某些JS框架，它将适当装饰的复选框变成互斥的选择。 Maybe you don't want them to be mutually exclusive. 也许您不希望它们相互排斥。 If that's the case I'll update my answer. 如果是这种情况，我将更新我的答案。 Either way, you can use another attribute on the group of checkboxes to aggregate them all, such as name . 无论哪种方式，您都可以在复选框组上使用另一个属性来汇总它们，例如name 。 See my changes to the code snippet (below) for using name to find the selected plan. 请参阅我对代码段所做的更改（如下所示），以使用name查找所选计划。 You could assign all checkboxes in a particular group a name, class, or modify their IDs to include some base to use in a selector. 您可以为特定组中的所有复选框分配名称，类，或修改其ID以包括一些在选择器中使用的基础。 You could put them inside a container element (div) for easier reference, and then bind your inputs' events... 您可以将它们放在容器元素（div）中以方便参考，然后绑定输入的事件...
var lastPlanSelection = "none";
$('input[name=targetSet]').on('click', function() { lastPlanSelection = $(this).val(); });
Modifying your snippet to find the selected radio button...same principle could be applied to checkboxes using class attribute. 修改代码段以找到选定的单选按钮...使用class属性可以将相同原理应用于复选框。
$(document).ready(function () { $('.units').change(function () { var selectedPlan = $('input[name=plan]:checked'); alert("Selected Plan: " + (selectedPlan.length === 1 ? selectedPlan.val() : "none")); }); });
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <div class="setup-content" id="form-3"> <div id="repurchase"> <div class="lblHead">REPURCHASE REQUEST</div> <div class="form-group"> 1.<input type="radio" id="cashPlan" name="plan" value="Cash"><label for="cashPlan">Cash Plan</label><br/> <input type="radio" id="epfPlan" name="plan" value="EPFPlan"><label for="epfPlan">EPF Plan</label> </div> <div class="form-group"> <div class="col-lg-6"> <label>Fund Name</label> <select id="fundId" class="form-control drplst units" AppendDataBoundItems="true"> <option Value=""></option> <option Value="123">123</option> <option Value="369">369</option> </select> </div> <div class="col-lg-6"> <div class="clearfix"></div> <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label> <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label> <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label> <asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox> </div> <div class="clearfix"></div> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.