开发者

Help removing class with checkbox

开发者 https://www.devze.com 2023-03-24 15:18 出处:网络
I am trying to remove a class from a div with a checked checkbox My Jquery: <script type=\"text/javascript\">

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="&#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">
        &开发者_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>.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号