jQuery切换删除输入类型复选框

时间:2014-04-24 08:13:21

标签: jquery html css checkbox

我有一个复选框。它将更新作为输入文本框的$('#express')的值。如果我使用.toggle而不是.click,则会隐藏该复选框。

切换是否是我的复选框被删除或不可见的原因?

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;}

2 个答案:

答案 0 :(得分:3)

您正在使用的函数$.toggle(fn, fn);已在 jQuery 1.8 中弃用,并已在 jQuery 1.9中删除

此外,我认为您需要change事件

$("#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
    }
});

答案 1 :(得分:1)

希望你有一个带有id express的DOM元素。

它适用于jQuery 1.8

这是一个工作小提琴。

click here

否则原因可能是您导入的Jquery。有控制台错误吗?这会有所帮助.. 如果它的jquery 1.9尝试使用更改而不是切换。

$("#shunfeng").change(
function(){ console.log("A");
 $('#express').val("25");
 }, function(){
     $('#express').val("0");
     }
 );