Question

我遇到了一个新问题，经过一些测试和研究后我无法理清。

我有几个选择框嵌套在几个ul＆gt; li中，如下所示：

<ul>
    <li>
<span class="select">

<input type="checkbox" name="kurse[]" value="" />

<select name="numbers1"  value="">
  <option value="">Bitte w&auml;hle eine Option...</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>
</span>

    </li>
    <li>
        <input type="checkbox" name="kurse[]" value="" />
<span class="select">

<select name="numbers2"  value="">
  <option value="">Bitte w&auml;hle eine Option...</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>
</span>

    </li>
    <li>
        <input type="checkbox" name="kurse[]" value="" />
<span class="select">

<select name="numbers3" value="">
  <option value="">Bitte w&auml;hle eine Option...</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>
</span>

    </li>
</ul>

现在我的Javascript通过点击li来触发嵌套复选框。这是脚本：

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).toggleClass('active').siblings();
    jQuery(this).find('input').prop('checked', function () {
        return !this.checked;
    });
});

我必须添加选择框，现在我想打开嵌套在已经点击的li中的选择框。选择一个选项后，我想要复选框＆＃34;点击＆＃34;它嵌套在同一个li里面。

通过编辑上面的代码我结束了这样的事情：

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).find('select').prop(function () {
        jQuery(this).trigger('click');
    });
});

但由于我对jQuery缺乏了解，这不起作用。

对此有何建议？有可能使用一些jQuery，还是需要更改为选择或类似的东西？

这是一个小提琴：

http://jsfiddle.net/QHv6B/1/

Answer 1

我刚编辑了你的jQuery代码，并在你的html中更改了两行以使其正常工作。

JSFiddle

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).toggleClass('active').siblings();
});

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).find('select').prop(function () {
        jQuery(this).trigger('click');
    });
});

jQuery(document).on('change', 'select', function () {
    var selectedItem = $(this).find('option:selected').attr('value');
    var checkBox = $(this).prev();
    if (typeof selectedItem === 'undefined' || selectedItem === "") {
        alert("You must select an option");
        $(checkBox).prop('checked', false);
    } else {
        $(checkBox).prop('checked', true);
    }
});

jQuery - 当选项选择触发复选框时，单击li时打开选择框

1 个答案: