Question

我有一行带有与它们关联的下拉列表的复选框。如何在所选复选框的相应下拉列表中返回值？

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

使用Jquery在下拉列中返回不同的值

2 个答案: