javascript - 选择器正在选择多行中的所有单选按钮。我想获取单击的单选按钮行上的输入框的名称

Question

我有以下布局:

我正在使用以下选择器观察美元符号 ($) 和百分号 (%) 单选按钮的更改:

$( "#facultyTable input:radio.dollar,#facultyTable input:radio.percent").change(function(){
    //What to do here?
});

我尝试使用 .parent() 选择器，但问题是，由于我选择了所有单选按钮，我无法简单地获取一行的父 <tr>，它不在所有行中。我想要的是:一旦按下单选按钮，jquery 就会获取同一行中其左侧的文本框的值。我怎样才能实现这个目标？

如果需要的话，这是表格布局:

 <table id="facultyTable">
        <thead>
            <tr>
                <th>Username</th>
                <th>Payment Distribution</th>
                <th>Account Number (Optional)</th>
            </tr>
        </thead>
        <tbody><tr>
            <td><input name="username[]" value="klarson" data-cip-id="cIPJQ342845639" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td>
            <td><input type="radio" name="klarsonOption" value="Even">Even
                <input type="radio" class="dollar" name="klarsonOption" value="$">$
                <input type="radio" class="percent" name="klarsonOption" value="%">%
                <input type="text" name="klarsonAmount" style="display:none;">
                    </td>
            <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845640"></td>
            </tr><tr>
            <td><input name="username[]" value="ppoupart" data-cip-id="cIPJQ342845641" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td>
            <td><input type="radio" name="ppoupartOption" value="Even">Even
                <input type="radio" class="dollar" name="ppoupartOption" value="$">$
                <input type="radio" class="percent" name="ppoupartOption" value="%">%
                <input type="text" name="ppoupartAmount" style="display:none;">
                    </td>
            <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845642"></td>
            </tr><tr>
            <td><input name="username[]" value="rcohen" data-cip-id="cIPJQ342845643" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td>
            <td><input type="radio" name="rcohenOption" value="Even">Even
                <input type="radio" class="dollar" name="rcohenOption" value="$">$
                <input type="radio" class="percent" name="rcohenOption" value="%">%
                <input type="text" name="rcohenAmount" style="display:none;">
                    </td>
            <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845644"></td>
            </tr><tr>
            <td><input name="username[]" value="shai" data-cip-id="cIPJQ342845645" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td>
            <td><input type="radio" name="shaiOption" value="Even">Even
                <input type="radio" class="dollar" name="shaiOption" value="$">$
                <input type="radio" class="percent" name="shaiOption" value="%">%
                <input type="text" name="shaiAmount" style="display:none;">
                    </td>
            <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845646"></td>
            </tr><tr>
            <td><input name="username[]" value="vanbeek" data-cip-id="cIPJQ342845647" title="Lazarus is saving this form. 
Click to recover previous versions" style="cursor: auto; background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td>
            <td><input type="radio" name="vanbeekOption" value="Even">Even
                <input type="radio" class="dollar" name="vanbeekOption" value="$">$
                <input type="radio" class="percent" name="vanbeekOption" value="%">%
                <input type="text" name="vanbeekAmount" style="display:none;">
                    </td>
            <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845648"></td>
            </tr></tbody>
          </table>

Answer 1

你可以试试这个

$( "#facultyTable input:radio.dollar,#facultyTable input:radio.percent").change(function(){

    var username = $(this).parent("td").prev("td").find("input:text").val();

});

<强> DEMO