Kissa Mia Kissa Mia - 6 months ago 17
CSS Question

jQuery toggle removes input type checkbox

I have a checkbox. It will update the value of

$('#express')
that is an input text box. The checkbox will be hidden if I use
.toggle
instead of
.click
.

Is the toggle a reason for my checkbox to be removed or invisible?

HTML

<form id="addupload" method="post" action="order_history/lightbox/mini-upload-form/upload.php" enctype="multipart/form-data">
<div id="upload">
<div id="drop">
Drop Here
<a>Browse</a>
<input id="uplo" type="file" name="upl" />
</div>
<ul> </ul>
</div>
<div id="formcontent">
<label class="required" for="unitprice" title="Unit price"><input type="text" id="unitprice" name="unitprice" />Unit price</label>
<label class="required" for="qty" title="How many pcs"><input type="text" id="qty" name="qty" />Quanity</label>
<label class="required" for="express" title="Express within China"><input type="text" id="express" name="express" />Express</label>
<label class="required" for="linkURL" title="Insert a full URL http:\\"><input type="text" id="linkURL" name="linkURL" />Link</label>
<label for="yourdesc" title="Describe your need clearly">Description<textarea id="yourdesc" name="yourdesc"></textarea></label>
<label for="shunfeng" title="SF is RMB25 for 1kg ">Express ?<input type="checkbox" id="shunfeng" class="shunfeng" name="shunfeng" /></label>
<label for="formsubmit" class="nocontent" id="uptest"><input type="button" id="submitButton" href="#" class="progress-button" onClick="upload()" value="Add to order" /><strong>Note:</strong> Items marked <img src="order_history/images/required.jpg" alt="Required marker" width="20" height="20" /> are required fields</label>
</div>
</form>


JQUERY

$("#shunfeng").toggle(
function(){
$('#express').val("25");
}, function(){
$('#express').val("0");
}
);


CSS

.shunfeng{
width:15px;
height:15px;}

Answer

The function $.toggle(fn, fn); which you are using was deprecated in jQuery 1.8 and removed in jQuery 1.9

Moreover I think you need change event

$("#shunfeng").change(function () {
    if(this.checked) {
        $('#express').val("25"); //If checked set value to 25
    } else {
        $('#express').val("0"); //If unchecked set value to 0
    }
});