2015-08-25 4 views
0

Мне нужно получить идентификатор до и после элемента html выпадающего списка при изменении. См. Исходный код удара.
Когда имя фонд выбран Мне нужно, чтобы получить ранее установлен флажок Идентификатор или имя (Наличный/ИПФ) & после флажком идентификатора или имени (No.of Единицы Reedem/Сумма Reedem/Все единицы).
Заранее спасибо.Как получить идентификатор элемента html с помощью jquery

$(document).ready(function() { 
 
      $('.units').change(function() { 
 
       alert($(this).attr('id')); 
 
       alert($(this).before().parent().parent().html()); 
 
       
 
      }); \t 
 
    });
<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> 
 
\t </div> 
 
    </div>

+0

'.before()' для вставки что-то перед указанным элементом, он не имеет смысла называть его без аргументов. Вы имеете в виду '.prev()'? – Barmar

+0

Родитель предыдущего элемента совпадает с родительским элементом текущего элемента, поэтому я не вижу смысла использовать '.prev(). Parent()'. Это как сказать «мать моего брата», а не «моя мать». – Barmar

+0

Что делать, если проверено более одного флажка? Если они взаимоисключающие, вы, вероятно, должны использовать радиокнопки вместо флажков. – Barmar

ответ

0

Предполагая, что ваши планы являются взаимоисключающими, вы хотели бы, чтобы переключатели отображали их, если только F3m... не указывает на некоторые рамки JS, которые бы превратили соответствующие декорированные флажки во взаимоисключающие элементы. Возможно, вы не хотите, чтобы они были взаимоисключающими. Если это так, я уточню свой ответ. В любом случае вы можете использовать другой атрибут в группе флажков для их объединения, например name. См. Мои изменения в фрагменте кода (ниже) для использования name, чтобы найти выбранный план. Вы можете назначить все флажки в определенной группе имени, классу или изменить свои идентификаторы, чтобы включить в базу несколько базовых элементов. Вы можете поместить их внутри контейнера элемента (Div) для облегчения ведения, а затем связать события ваши входные данные ...

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

Модификация своего фрагмента, чтобы найти кнопку выбранного радио ... Тот же принцип может применяется к флажкам с использованием атрибута класса.

$(document).ready(function() { 
 
      $('.units').change(function() { 
 
       var selectedPlan = $('input[name=plan]:checked'); 
 

 
       alert("Selected Plan: " + 
 
        (selectedPlan.length === 1 ? selectedPlan.val() : "none")); 
 
      }); \t 
 
    });
<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> 
 
\t </div> 
 
    </div>

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

     }); 
}); 

Это работает для одного зарегистрированного ящика, если более чем один флажок был chekced, вам нужно повторять, что и делать что-то с этим.

Смежные вопросы