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

好吧，我没有停止尝试，最后我让它与for (char* inputPtr = cc; inputPtr[0]; ) { char c = *inputPtr++; printf("%c", c); // Replace %s with %c to print one character }循环一起工作。我还添加了一个复选框选择限制2。我是JQuery的新手，所以代码可能并不像我想的那样干净，但似乎完美无缺。

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

.each()

}）;

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

1 个答案: