Help removing class with checkbox
I am trying to remove a class from a div with a checked checkbox
My 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>
My CSS:
.hidediv {display:none;}
My HTML:
<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></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">
&开发者_StackOverflow社区lt;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>
I think that the problem is that you submit the form on the button change and do nothing else:
$('.menuitem input:checkbox').change(function() {
$('form').submit();
})
you should do:
$('.menuitem input:checkbox').change(function(){
if($(this).is(":checked")) {
$('div.hidediv').removeClass("hidediv").show('slow');
}
});
Ther is no point in putting an else like you did before if you take off the class, you can't use the class selector anymore like you did
At the time that if($(this).is(":checked")) {
is executed, this
is not the checkbox. If you were to put this code within $('.menuitem input:checkbox').change(function(){
then it would be, otherwise you will need to change it to:
if($(".menuitem input:checkbox").is(":checked")) {
I'm not sure what your intent is though. As you have it now, the code is outside of the handler, meaning it will only run on initial load of the page. If put within the handler it would run when the checkbox is checked or uncheck, however, you are submitting the form in the handler so that won't be much use.
You also have an extra });
at the end.
EDIT: After looking at it again, I found another isssue. Using show
will override the class you are using to hide your elements. show
is essentially an inline style which will override the class. Instead, just use show
and hide
and abandon the class change (unless used for other styling).
EDIT2: You also have a broken div div>
.
精彩评论