更改输入类型，从单选按钮复选框，jquery

Question

首先，这是我第一个jQuery脚本，如果你有任何建议不要害羞。

我正在尝试以下操作。我有3列单选按钮。用上面的复选框。当我检查其中一个复选框时，该列将从单选按钮变为复选框，并且此时只能更改一行。我的脚本正在做所有这些，但我有一个问题。当我更改类型时，所有输入都会获得第一个输入的相同属性。我想我应该有一些循环，但我完全不知道如何做到这一点。

所以，我的问题：我如何改变我的脚本，以便只改变类型而不改变其他属性？

https://jsfiddle.net/bjc3a9y7/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>

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

}）;