jquery - 如何在选中复选框时发出警报告诉用户使用 Jquery 选择相应的下拉菜单？

Question

大家好，我有一些复选框，每个复选框都有与之对应的下拉列表..我想做的是

    **when a user checks a checkbox without selecting the dropdown i have to give an alert saying select any value..
    **when a user selects value from the dropdown make the corresponding checkbox checked
    **and if the user unchecks the checkbox set the dropdown value to default 

我的 html 看起来像这样

      @foreach(var item in Model.Resources)
       {
       <div class="select">
          <label class="label">
            <input type="checkbox" value="@item.Text" id="@item.value"/>
          </label>
         <div>
             <select id="quantity">
                <option value="">--select Quantity--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>

            </select>
        </div>
       </div>  
       }

任何人都可以帮我做这件事吗

Answer 1

这是我的第一篇 Stack Overflow 帖子，我还是个初学者。我想我会尝试一下，到目前为止这似乎有效。我使用了自己的表格和 ID，但我认为保持接近：

<form action="" method="post" name="order" id="order">
<fieldset>
    <div>
    <input name="check1" type="checkbox" id="check1" value="checked">
    </div>
    <div>
        <label for="country" class="label">Country</label>
        <select id="menu1">
            <option value="">--select Quantity--</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
    <div>
    <input id="webform_submit_button" value="Submit!" type="submit" class="submit" data-default-text="Sign up!">
    </div>
</fieldset>
</form>

这是我添加的 Jquery：

<script>
$(function() {
    function formStuff($check,$menu) {
        $check.click(function() {
            var checkIfChecked = $check.attr('checked');
            if (checkIfChecked == 'checked') {
                if ($menu.val("")) {
                    alert("Please select a value");
                    $check.attr('checked',false);
                }
            } else {
                $menu.val('');
            }
        }); //end click
        $menu.click(function() {
            var hasValue = $menu.val();
            if (hasValue != '') {
                $check.attr('checked',true);
            } else {
                $check.attr('checked',false)
            }
        }); //end click
    }
    formStuff($('#check1'),$('#menu1'));
}); //end ready
</script>

我没有在提交时添加验证，但由于这不是问题的一部分，我想我保持简单。希望这可以帮助！*更新为一个函数，因此您可以将其应用于您的其他表单元素。