Question

我正在尝试使用选中的复选框从div中删除一个类

我的Jquery：

 <script type="text/javascript">
// Submit form when checkbox is pressed
  $(function() {
$('.menuitem input:checkbox').change(function(){
    $('form').submit();
    })
// Remove hidediv class from div - DOES NOT WORK
    $('input:submit').hide().addClass("sdasd");
    if($(this).is(":checked")) {
        $('div.hidediv').removeClass("hidediv").show(slow);
    } else {
        $('div.hidediv').addClass("hidediv");
    }
});
});
  </script>

我的CSS：

.hidediv {display:none;}

我的HTML：

<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

        <div class="menuitem">
        <label for="search_company1">company1</label>

        <input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
        </div>
        <div class="menuitem">
        <label for="search_company3">company3</label>
        <input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
        </div>
 <div class="hidediv">
        <div class="menuitem">
        <label for="search_company2">company2</label>
        <input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
    <div>
</div>
    <input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>

Answer 1

我认为问题在于您在按钮更改时提交表单而不执行任何其他操作：

$('.menuitem input:checkbox').change(function() {
    $('form').submit();
})

你应该这样做：

$('.menuitem input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.hidediv').removeClass("hidediv").show('slow');
    } 
});

如果你取消课程，那么像你之前那样放一个其他的东西是没有意义的，你不能再像你那样使用班级选择器了

Answer 2

执行if($(this).is(":checked")) {时，this不是复选框。如果您将此代码放在$('.menuitem input:checkbox').change(function(){内，那么它就是，否则您需要将其更改为：

if($(".menuitem input:checkbox").is(":checked")) {

我不确定你的意图是什么。正如您现在所拥有的那样，代码在处理程序之外，这意味着它只会在页面的初始加载时运行。如果放在处理程序中，它将在选中或取消选中复选框时运行，但是，您将在处理程序中提交表单，这样就没有多大用处了。

最后还有一个额外的});。

编辑：再看一遍后，我找到了另一个问题。使用show将覆盖用于隐藏元素的类。 show本质上是一种内联样式，它将覆盖该类。相反，只需使用show和hide并放弃类更改（除非用于其他样式）。

EDIT2：你还有一个破损的div div>。

帮助删除带复选框的类

2 个答案: