Question

我如何在jquery中更改以下代码，以便当有人选择“已存档（id = radio3）”时，选项2隐藏并且选择了选项1（id = radio5），是否更改了该选项的背景？

即使警报不起作用？

$("input[@name='radios2']").change(function(){
  alert("12");
});

http://jsfiddle.net/aPsE4/4/

Answer 1

没有</br>，而是使用CSS边距，并且在@前面不需要name。另外，您的<label>的{{1}}属性是错误的。

for

$(function () {
  $("input[name='radios']").change(function() {
    if (this.value == "true") {
      $("label[for='radio5']").addClass("hidden");
      $("#radio4").prop("checked", true);
    } else {
      $("label[for='radio5']").removeClass("hidden");
      $("#radio4, #radio5").prop("checked", false);
    }
  });
  $("input[name='radios2']").change(function() {
    alert(this.value);
  });
});

.radio-toolbar {
  margin: 15px 0;
}

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
}

.radio-toolbar label.hidden {
  display: none;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

更新和评论答复：

谢谢，我如何添加上面的代码，以便一旦选择“已存档”就可以尝试隐藏“选项2”并选择“选项1”显示？

使用以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-toolbar">
  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>
  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>
</div>

<div class="radio-toolbar">
  <input type="radio" id="radio4" name="radios2" value="false">
  <label for="radio4">Option 1</label>
  <input type="radio" id="radio5" name="radios2" value="true">
  <label for="radio5">Option 2</label>
</div>

只有一个运行代码片段，没有编辑？

如果您拥有该帖子，则会出现

Edit Snippet。例如，尝试编辑问题并使用Ctrl + M添加代码段。

如何隐藏和预设标签jQuery CSS

1 个答案: