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を返すことはありませんので、それはですので、常に何も選択されていない場合でも、PRODUCT_TYPEの値を割り当てています。代わりにあなたが持っているチェックのため、これを使用する：正しくあなたがチェックし、製品の種類を持っていることを確認するためにチェックします

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

。