入力の種類をラジオボタンからチェックボックスに変更するjquery

Question

最初はこれが私の最初のjQueryスクリプトです。

私は以下を実行しようとしています。私は3列のラジオボタンを持っています。上記のチェックボックスを使用します。これらのチェックボックスの1つをチェックすると、列はラジオボタンからチェックボックスに変わり、その時には1つの行しか変更できません。私のスクリプトはそれをすべて実行していますが、私には1つの問題があります。タイプを変更すると、すべての入力が最初の入力と同じ属性を取得します。私はループのいくつかの並べ替えが必要だと思うが、私は絶対にこれを行う方法はありません。

私の質問：私のスクリプトを変更して、型の変更だけで他の属性は変更できないようにするにはどうすればよいですか？

$('input[name="switch"]').change(function() { 
 
var checked = $(this).is(':checked'); 
 
$('input[name="switch"]').prop('checked',false); 
 

 
var brandType = $('input[name="brand"]').prop("type"); 
 
var fuelType = $('input[name="fuel"]').prop("type"); 
 
var bodyType = $('input[name="body"]').prop("type"); 
 

 
if (brandType == 'checkbox') { 
 
    var oldInput = $('input[name="brand"]'); 
 
    $('input[name="brand"]').replaceWith(
 
     $('<input type="radio" />'). 
 
     attr("value", oldInput.attr("value")). 
 
     attr("name", oldInput.attr("name")). 
 
     attr("id", oldInput.attr("id")) 
 
    ) 
 
} else if (fuelType == 'checkbox') { 
 
    var oldInput = $('input[name="fuel"]'); 
 
    $('input[name="fuel"]').replaceWith(
 
     $('<input type="radio" />'). 
 
     attr("value", oldInput.attr("value")). 
 
     attr("name", oldInput.attr("name")). 
 
     attr("id", oldInput.attr("id")) 
 
    ) 
 
} else if (bodyType == 'checkbox') { 
 
    var oldInput = $('input[name="body"]'); 
 
    $('input[name="body"]').replaceWith(
 
     $('<input type="radio" />'). 
 
     attr("value", oldInput.attr("value")). 
 
     attr("name", oldInput.attr("name")). 
 
     attr("id", oldInput.attr("id")) 
 
    ) 
 
}; 
 

 
if(checked) { 
 
    $(this).prop('checked',true); 
 

 
    var id = $(this).attr("id"); 
 
    var oldInput = $('input[name="' + id + '"]'); 
 
    $('input[name="' + id + '"]').replaceWith(
 
     $('<input type="checkbox" />'). 
 
      attr("value", oldInput.attr("value")). 
 
      attr("name", oldInput.attr("name")). 
 
      attr("id", oldInput.attr("id")) 
 
    ) 
 
}; 
 

 
});

#container { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.filter { 
 
    width: 150px; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<div id='container'> 
 
    <div class='filter'> 
 
    <header> 
 
     Brand <input type='checkbox' id='brand' name='switch' class='switch'> 
 
    </header> 
 
    <div id='brand'> 
 
     <div class='filter-item'> 
 
     <span><input type='radio' id='mercedes' name='brand' value='mercedes'></span> 
 
     <label for='mercedes'><span></span>Mercedes-benz</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='bmw' name='brand' class='brand' value='bmw'> 
 
     <label for='bmw'><span></span>BMW</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='audi' name='brand' class='brand' value='audi'> 
 
     <label for='audi'><span></span>Audi</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='ford' name='brand' class='brand' value='ford'> 
 
     <label for='ford'><span></span>Ford</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='dodge' name='brand' class='brand' value='dodge'> 
 
     <label for='dodge'><span></span>Dodge</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='filter'> 
 
    <header> 
 
     Fuel <input type='checkbox' id='fuel' name='switch' class='switch'> 
 
    </header> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='diesel' name='fuel' class='fuel' value='diesel'> 
 
     <label for='diesel'><span></span>Diesel</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='gasoline' name='fuel' class='fuel' value='gasoline'> 
 
     <label for='gasoline'><span></span>Gasoline</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='electric' name='fuel' class='fuel' value='electric'> 
 
     <label for='electric'><span></span>Electric</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='other' name='fuel' class='fuel' value='other'> 
 
     <label for='other'><span></span>Other</label> 
 
    </div> 
 
    </div> 
 
    <div class='filter'> 
 
    <header> 
 
     Body <input type='checkbox' id='body' name='switch' class='switch'> 
 
    </header> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='convertible' name='body' class='body' value='convertible'> 
 
     <label for='convertible'><span></span>Convertible</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='coupe' name='body' class='body' value='coupe'> 
 
     <label for='coupe'><span></span>Coupe</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='sedan' name='body' class='body' value='sedan'> 
 
     <label for='sedan'><span></span>Sedan</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='station' name='body' class='body' value='station'> 
 
     <label for='station'><span></span>Station wagon</label> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/bjc3a9y7/1/

Answer 1

まあ、私がしようと停止しなかったと最終的に私はそれが.each()ループで動作するようになりました。私は2のチェックボックス選択の制限も加えました。私はJQueryを初めて使っているので、コードはきれいではないかもしれませんが、完全に機能するようです。

https://jsfiddle.net/bjc3a9y7/2/

$('input[name="switch"]').change(function() { 
var checked = $(this).is(':checked'); 
$('input[name="switch"]').prop('checked',false); 

var arr = ["brand", "fuel", "body"]; 

$.each(arr, function(i, val) { 
    var type = $('input[name="' + val + '"]').prop("type"); 

    if (type == 'checkbox') { 
     $('input[name="' + val + '"]').each(function(index, value){ 
      var oldInput = $(value); 
      if(index == 0){ 
       $(value).replaceWith(
        $('<input type="radio" />'). 
        prop("value", oldInput.prop("value")). 
        prop("name", oldInput.prop("name")). 
        prop("id", oldInput.prop("id")). 
        prop('checked',true) 
       ) 
      } else { 
       $(value).replaceWith(
        $('<input type="radio" />'). 
        prop("value", oldInput.prop("value")). 
        prop("name", oldInput.prop("name")). 
        prop("id", oldInput.prop("id")) 
       ) 
      } 
     }); 
    }; 
}); 

if(checked) { 
    $(this).prop('checked',true); 
    var id = $(this).prop("id");       
    $('input[name="' + id + '"]').each(function(index, value){ 
     var oldInput = $(value); 

     var checked2 = $(value).is(':checked'); 
     if(checked2) { 
      $(value).replaceWith(
       $('<input type="checkbox" />'). 
       prop("value", oldInput.prop("value")). 
       prop("name", oldInput.prop("name")). 
       prop("id", oldInput.prop("id")). 
       prop('checked',true) 
      ) 
     }else{ 
      $(value).replaceWith(
       $('<input type="checkbox" />'). 
       prop("value", oldInput.prop("value")). 
       prop("name", oldInput.prop("name")). 
       prop("id", oldInput.prop("id")) 
      ) 
     } 
    }); 

    // limit selection checkboxes 
    $('input[name="' + id + '"]').change(function(){ 
     var max= 2; 
     if($('input[name="' + id + '"]:checked').length == max){ 
      $('input[name="' + id + '"]').prop('disabled', 'disabled'); 
      $('input[name="' + id + '"]:checked').removeProp('disabled'); 
     }else{ 
      $('input[name="' + id + '"]').removeProp('disabled'); 
     } 
    }); 
} 

}）。