Question

我有几个收音机和复选框用于显示一些div。我需要在单击radiobox后显示单独的div显示文本（例如作者姓名），并在单击复选框后向前一个文本添加一些文本。有可能在css / javascript的帮助下创建这样的东西吗？有什么建议？我认为我需要在css中添加/删除带有“content：”bla bla“”的类。

Answer 1

纯CSS解决方案

要更改值（或具体地说，改为：在内容之后），您不需要任何JavaScript！
您只需要:checked和相反的:not(:checked)。通过label data-attributes，您可以查看每个州和按钮的文本。

input[type="radio"]:not(:checked)+label:after{
	content:attr(data-notchecked);
}
input[type="radio"]:checked+label:after{
	content:attr(data-checked);
}

<input type="radio" name="radio" id="radio1"><label data-checked="checked Radio 1" data-notchecked="not checked Radio 1" for="radio1"></label><br>
<input type="radio" name="radio" id="radio2"><label data-checked="checked Radio 2" data-notchecked="not checked Radio 2" for="radio2"></label>

Answer 2

是的，您可以使用纯JavaScript函数：

// assign function to onclick property of checkbox
document.getElementById('TestCheckbox').onclick = function() {
    // access properties using this keyword
    if ( this.checked ) {
        // if checked ...
        alert( this.value );
    } else {
        // if not checked ...
    }
};

但我认为JQuery或AngularJS为您提供了更好，更简单的解决方案：

JQuery示例：

if(document.getElementById('TestCheckbox').checked)
    $("#TestDiv").show();  // Show||hide div or anything else
  else
    $("#TestDiv").hide(); // Show||hide div or anything else

您可以使用类而不是ID来减少代码。我同意Luca Jung的方法。

在选中/取消选中radiobox后，向div添加/删除一些文本

2 个答案: