Question

我有this code应该根据特定的复选框显示和隐藏元素输出。

我得到的输出是每个复选框在点击时显示的输出数量应该超出预期。

如何使用特定的CSS ID进行定位？

我的意思是，如果你点击每个方框，它应该只显示那个特定方框的文字，而不是全部。

感谢您的见解!!

Rosamunda

Answer 1

/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}

/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}

Answer 2

您可以使用包含*=选择器。我不确定它具有什么浏览器兼容性，但它适用于Chrome。例如，更改三个复选框中第一个的CSS如下所示：

input[id*="131"]:checked ~ div[class="tipo-uf-131"] {display:inline;}

Answer 3

这接近于过度思考并过分依赖CSS的完美例子。样式表应该负责演示文稿而不是功能。 CSS选择器可能足够复杂，您可以将其用于验证检查 - 虽然不会让它成为一个好主意：）

你最好依靠javascript来实现这一目标，并最终获得更广泛的浏览器支持矩阵。稍微改变你的标记：

<label>Box 1:</label> <input class="form-checkbox" id="cb131" type="checkbox"/>
...<input class="form-checkbox" id="cb134" type="checkbox"/>
...<input class="form-checkbox" id="cb130" type="checkbox"/>
<div id="cb131-linked"><b>Box 1 is checked.</b></div>
<div id="cb134-linked">...</div>
<div id="cb130-linked">...</div>

...你可以添加一个jQuery监听器，这样当切换一个复选框的状态时，你可以像这样显示相关的div：

$checkboxes = $(".form-checkbox");
$checkboxes.change(function(){
    console.log("changed");
    $checkboxes.each(function(){
        $this = $(this)
        $("#"+$this.attr("id")+"-linked").toggle($this.is(":checked"));
    });
});

小提琴：http://jsfiddle.net/9t59j/11/

此外，输入应该是自闭元素。

如何使用复选框隐藏css元素：根据元素id或类的不同输出？

3 个答案: