javascript - 更改输入类型，从单选按钮到复选框，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');
        }
    });
}

});