如何使用jQuery獲取HTML元素ID

Question

我需要在更改下拉列表的html元素之前和之后獲取ID。 請參閱打擊源代碼。
選擇基金名稱后，我需要獲取之前選擇的復選框ID或名稱（現金/ Epf）和選擇的復選框ID或名稱之后的名稱（Reedem單位數量/ Reedem金額/所有單位） 。
提前致謝。

 $(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>

Answer 1

嘗試這個：

$(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'));

        }); 
});

這適用於單個復選框，如果選中了多個復選框，則需要對其進行迭代並對此進行處理。

Answer 2

假設您的計划是互斥的，那么您將希望單選按鈕來表示它們，除非F3m...表示某些JS框架，它將適當裝飾的復選框變成互斥的選擇。 也許您不希望它們相互排斥。 如果是這種情況，我將更新我的答案。 無論哪種方式，您都可以在復選框組上使用另一個屬性來匯總它們，例如name 。 請參閱我對代碼段所做的更改（如下所示），以使用name查找所選計划。 您可以為特定組中的所有復選框分配名稱，類，或修改其ID以包括一些在選擇器中使用的基礎。 您可以將它們放在容器元素（div）中以方便參考，然后綁定輸入的事件...

var lastPlanSelection = "none";
$('input[name=targetSet]').on('click', function() { lastPlanSelection = $(this).val(); });

修改代碼段以找到選定的單選按鈕...使用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>

如何使用jQuery獲取HTML元素ID

問題描述

2 個解決方案

解決方案1
1 2015-08-25 02:29:57

解決方案2
0 已采納 2015-08-25 02:58:35

如何使用jQuery獲取HTML元素ID

問題描述

2 個解決方案

解決方案1 1 2015-08-25 02:29:57

解決方案2 0 已采納 2015-08-25 02:58:35

解決方案1
1 2015-08-25 02:29:57

解決方案2
0 已采納 2015-08-25 02:58:35