jquery - 使用 Jquery 在下拉列表行中返回不同的值

Question

我有一排带有与之关联的下拉菜单的复选框。如何为选中的复选框返回相应下拉列表中的值？

http://jsfiddle.net/Gqzhq/21/

$('input[name=options]').live('click', function() {

    if($(this).hasClass('checked'))
    {
    $(this).removeClass('checked');

    }else{
    $(this).addClass('checked');

    }

    });

---

HTML

<table id="test" summary="test">
<th>A</th> <th>B</th><th>C</th>

<tr>
<td><input type="checkbox" name="options" id="1" value="500">
      <select class="my_select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></td>
    <td><input type="checkbox" name="options" id="2" value="500">
    <select class="my_select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></td>

    <td><input type="checkbox" name="options" id="3" value="500">
    <select class="my_select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></td>

    </tr>

    </table>

Answer 1

您可以使用目标选择siblings()或转到父级TD并使用find(). 也live()已弃用，请on()改用。

如果你使用toggleClass()你可以删除你的if($(this).hasClass('checked'))

$(document).on('click', 'input[name=options]', function() {){
    /* "this" within the handler refers to current input*/

   var selectVal= $(this).siblings('select').val();
             /* OR */
   var selectVal= $(this).parent().find('select').val();

   /* second argument determines  whether to add or remove*/ 
   $(this).toggleClass('checked', this.checked);

});

API 参考：

http://api.jquery.com/siblings/

http://api.jquery.com/toggleClass/

http://api.jquery.com/on/

Answer 2

$('input[type=checkbox]').click(function() {
    if($(this).attr('checked')) 
        alert(
                'value of combo ' + 
                 $(this).attr('id') + ' is ' + 
                 $(this).next('.my_select').val()
             );
});

我改变了你的例子http://jsfiddle.net/Gqzhq/27/