Question

我正在使用我的网站：http://cleaners.se/home/#kontakt

我有一个问题，我想将复选框设置为与其他表单相同。我希望复选框是独占的，因此您只能选择一个复选框。将它们放在一起是否也是正确的方法？或者有更好的方法吗？

我已经这样做了：

.knapp + label {
}

label {
	display: inline;
}

.knapp {
	display: none;
}

.knapp + label {
	background-color: #2CACA9;
	border: 0;
	border-radius: 0;
	height: 50px;
	width: 50px;
	top: 3px;
	display: inline-block;
	position: relative;
	margin-left: 10px;
}

.knapp + label:active, .knapp:checked + label:active {
}

.knapp:checked + label {
	background-color: #2CACA9;
	border: 0;
	color: #FFFFFF;
}

.knapp:checked + label:after {
	content: '\2716';
	font-size: 25px;
	font-family: "montserrat";
	position: absolute;
	top: 3px;
	left: 15px;
	color: #FFFFFF;
}

<div>
<input type="checkbox" id="telefon" class="knapp" /><label for="telefon"></label><input type="checkbox" id="e-post" class="knapp" /><label for="e-post"></label>
</div>

Answer 1

如果您希望用户一次只选择一个复选框。

然后你想使用无线电输入

<input type="radio" name="radio_button" /> Yes
<br />
<input type="radio" name="radio_button" /> No

Answer 2

好的，我已经有一段时间了。我发现可能需要添加JavaScript，是的，它适用于jQuery 1.7，我的问题现在对于那些在javascript上比我更好的人...是否可以使这个脚本更好？请记住它只适用于我认为的jQuery 1.7 ..

<script>
    $('div .knapp').click(function() {
        checkedState = $(this).attr('checked');
        $(this).parent('div').children('.knapp:checked').each(function() {
            $(this).attr('checked', false);
        });
        $(this).attr('checked', checkedState);
    });
</script>

联系表格7 - 复选框自定义/程式化

2 个答案: