开发者

changing values of hidden fields with jQuery only "fires" for the first change but not the following ones

I have a strange phenomenon with jQuery. I have a div with a few checkboxes and radio buttons

<div id="advanced_search">
<div>
    <div class="searchoptions">
        <input type="checkbox" id="hidden_mr" name="hidden_mr" />
        <label for="hidden_mr">Model Release</label>
    </div>
  开发者_开发百科  <div class="searchoptions">
        <input type="checkbox" id="hidden_pr" name="hidden_pr" />
        <label for="hidden_pr">Property Release</label>
    </div>
</div>
<div>
    <div class="searchoptions">
        <input type="radio" id="hidden_portrait" name="hidden_format" value="portrait" />
        <label for="hidden_portrait">Portrait</label>
    </div>
    <div class="searchoptions">
        <input type="radio" id="hidden_landscape" name="hidden_format" value="landscape" />
        <label for="hidden_landscape">Lanscape</label>
    </div>
    <div class="searchoptions">
        <input type="radio" id="hidden_square" name="hidden_format" value="square" />
        <label for="hidden_square">Square</label>
    </div>
    <div class="searchoptions">
        <input type="radio" id="hidden_pano" name="hidden_format" value="pano" />
        <label for="hidden_pano">Panoramic</label>
    </div>
</div>
</div>

When selecting the checkboxes or radiobuttons I want to change hidden fields that are part of the "real" form that is elsewhere in the markup.

<form method="get" name="searchbox" id="searchbox" action="">
<input type="hidden" id="mr" name="mr" value="" />
<input type="hidden" id="pr" name="pr" value="" />
<input type="hidden" id="format" value="" />
</form>

I thought that the following jQuery code would do it

$(document).ready(function() { 
    $('#hidden_mr').change(function() {
        if ($('#hidden_mr').attr('checked')) { $('#mr').val(1); }
        else { $('#mr').val(0); }
    });
    $('#hidden_pr').change(function() {
        if ($('#hidden_pr').attr('checked')) { $('#pr').val(1); }
        else { $('#pr').val(0); }
    });
    $('input:radio[name=hidden_format]').change(function() {
        $('#format').val($('input:radio[name=hidden_format]:checked').val());
    });
});

When I load the page and click on "Model Release" it sets #mr to 1, deselecting it sets it 0. But with the other checkbox or the radiobuttons nothing happens. If I however load the page again and click on "Property Release" it sets #pr to 1 but it doesn't do anything for the other elements anymore. And the same for the radiobuttons: I load the page and click on them, they work but all others stop working.

I hope that there is something very basic that I'm missing (or rather: I'm afraid that that might be the case and I'm too stupid to see it ...) Also, the code might not be the smartest, so if anyone has any improvement suggestions, I'll be happy to see them.

cheers, jibe

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜