從jQuery函數中獲取未定義的輸出

Question

我從下面的jQuery函數中獲取未定義的輸出。我最初分配空字符串到我的product_type,我希望它是空的，當我不選擇其中任何人，但仍然得到undefined輸出。希望我能在這裏得到一些提示。

$(function() { 
 
    var internal_note = {}; 
 
    var customer_note = {}; 
 
    var product_type = ""; 
 
    var web_camera = ""; 
 
    var touch_screen = ""; 
 
    $("#test").on("click" , 'button:not(:disabled)',function(event){ 
 
     if ($('input[name="product_type"]:checked')){ 
 
      product_type = $('input[name="product_type"]:checked').attr("value"); 
 
     }; 
 
     if($('input[name="web_camera"]:checked')){ 
 
      web_camera = $('input[name="web_camera"]:checked').attr("value"); 
 
     }; 
 
     if($('input[name="touch_screen"]:checked')){ 
 
      touch_screen = $('input[name="touch_screen"]:checked').attr("value"); 
 
     }; 
 
     $('#left_note_list input').each(function(){ 
 
      internal_note[this.value] = JSON.stringify($(this).val()); 
 
     }); 
 
     alert(product_type); 
 
     $.ajax({ 
 
     type: "post", 
 
     url: '/insert/', 
 
     data: { 
 
     'internal_note': JSON.stringify(internal_note), 
 
     'product_type': JSON.stringify(product_type), 
 
     'web_camera': JSON.stringify(web_camera), 
 
     'touch_screen': JSON.stringify(touch_screen) 
 
     }, 
 
     success: function (data) { 
 
      swal(data,'You Click the Button','success'); 
 
      $("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled'); 
 
      }, 
 
     error: function(data){ 
 
      swal(data.responseText,'You Click the Button', 'error'); 
 
     } 
 

 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
    <h4 class="sub-header" id="product_type">Product Type</h4> 
 
         <form> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div> 
 
         </form> 
 
        </div><!-- /.col-lg-4 Product Type--> 
 
        
 
       <div class="text-center" id="test"> 
 
       <button target="_blank" 
 
        class="btn btn-primary "> 
 
        Test 
 
       </button> 
 
       </div>

Answer 1

你的問題來自你檢查的方式是檢查複選框。這如果檢查if ($('input[name="product_type"]:checked'))。這是有效的，但是你沒有得到真實的或者錯誤的答案，所以你實質上是在檢查真理。您可以檢查$('input[name="product_type"]:checked')長度也可以做到這一點，而不是

$('input[name="product_type"]').is(":checked")

下面是關於如何檢查一個複選框是否被選中好的帖子

jQuery if checkbox is checked

$(function() { 
 
    var internal_note = {}; 
 
    var customer_note = {}; 
 
    var product_type = ""; 
 
    var web_camera = ""; 
 
    var touch_screen = ""; 
 
    $("#test").on("click" , 'button:not(:disabled)',function(event){ 
 

 
     if ($('input[name="product_type"]').is(":checked")){ 
 
      product_type = $('input[name="product_type"]:checked').attr("value"); 
 
     } 
 
     if($('input[name="web_camera"]:checked')){ 
 
      web_camera = $('input[name="web_camera"]:checked').attr("value"); 
 
     } 
 
     if($('input[name="touch_screen"]:checked')){ 
 
      touch_screen = $('input[name="touch_screen"]:checked').attr("value"); 
 
     } 
 
     $('#left_note_list input').each(function(){ 
 
      internal_note[this.value] = JSON.stringify($(this).val()); 
 
     }); 
 
     alert(product_type); 
 
     $.ajax({ 
 
     type: "post", 
 
     url: '/insert/', 
 
     data: { 
 
     'internal_note': JSON.stringify(internal_note), 
 
     'product_type': JSON.stringify(product_type), 
 
     'web_camera': JSON.stringify(web_camera), 
 
     'touch_screen': JSON.stringify(touch_screen) 
 
     }, 
 
     success: function (data) { 
 
      swal(data,'You Click the Button','success'); 
 
      $("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled'); 
 
      }, 
 
     error: function(data){ 
 
      swal(data.responseText,'You Click the Button', 'error'); 
 
     } 
 

 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="col-md-4"> 
 
        <h4 class="sub-header" id="product_type">Product Type</h4> 
 
         <form> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div> 
 
          <div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div> 
 
         </form> 
 
        </div><!-- /.col-lg-4 Product Type--> 
 
        
 
       <div class="text-center" id="test"> 
 
       <button target="_blank" 
 
        class="btn btn-primary "> 
 
        Test 
 
       </button> 
 
       </div>

Answer 2

這是因爲你的條件檢查是永遠不會返回false，所以它總是分配產品類型的值，沒有被選中時也是如此。您可以使用以下代碼替代您的檢查：

if ($('input[name="product_type"]:checked').length>0){ ... } 

這將正確檢查以確保您有檢查的產品類型。