单击另一个标签时如何获得默认视图？

Question

我是 jquery 的新手，了解一些基本的东西可能会多一点。 我在这工作：http://jsfiddle.net/Islam_Ibakaev/jdqg6bsh/5/

$('label').click(function() {
 $(this)
 .find(':radio')
 .css('display','none')
 .prev()
 .css('display','inline-block');
});

想让它看起来正常。换句话说，当点击其他标签时，之前点击的标签必须获得默认视图。 不知道如何实现它。很高兴获得一些帮助信息。

Answer 1

一个更简单的解决方案是删除 jQuery。你可以使用 CSS 来达到同样的效果：

看到这个Fiddle

HTML：

<div><label><input type="radio" name="houses"><span></span>House</label></div>
<div><label><input type="radio" name="houses"><span></span>On shore</label></div>
<div><label><input type="radio" name="houses"><span></span>Rent</label></div>
<div><label><input type="radio" name="houses"><span></span>Trade and Service</label></div>

CSS：

label span {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 25px;
    margin: 3px 3px 0px 5px;
    border: 1px solid black;
}

label input:checked + span {
    background-color: #49b956;
}

label {
    font-family: cursive;
    font-size: 13px;
}

input[type=radio] {
    display: none;
}

还有 jQuery：

/*
$('label').click(function() {
 $(this)
 .find(':radio')
 .css('display','none')
 .prev()
 .css('display','inline-block');
});
*/

Answer 2

Updated jsFiddle

您需要将name 属性添加到所有单选按钮并为其添加相同的值（这里我将其设置为abc）。

在您的 jQuery 中，您需要将 display 重置为默认值，然后将所需的效果应用于 this 元素（被点击）。

等效代码段：

$('label').click(function() {
    // reset all labels
    $('label')
    .find(':radio')
    .css('display','inline-block')
    .prev()
    .css('display','none');
    
    // apply effect to only 'this' element
    $(this)
    .find(':radio')
    .css('display','none')
    .prev()
    .css('display','inline-block');
});

label span {
    content: "";
    display: none;
    width: 13px;
    height: 13px;
    background-color: #49b956;
    border-radius: 25px;
    margin: 3px 3px 0px 5px;      
}

label {
    font-family: cursive;
    font-size: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><label><span></span><input name="abc" type="radio">House</label></div>
<div><label><span></span><input name="abc" type="radio">On shore</label></div>
<div><label><span></span><input name="abc" type="radio">Rent</label></div>
<div><label><span></span><input name="abc" type="radio">Trade and Service</label></div>

Answer 3

在进行新选择之前，您需要“取消选择”输入元素。 这是您的代码更新的小提琴：http://jsfiddle.net/charbz/jdqg6bsh/11/

function unselectAll() {
  $(document)
  .find('label span')
  .css('display','none');

  $(document)
  .find('label input')
  .prop('checked',false)
  .css('display','inline-block');
}

Answer 4

像这样用相同的名称定义您的输入收音机

<div><label><span></span><input type="radio" name="radioname">House</label></div>
<div><label><span></span><input type="radio" name="radioname">On shore</label></div>
<div><label><span></span><input type="radio" name="radioname">Rent</label></div>
<div><label><span></span><input type="radio" name="radioname">Trade and Service</label></div>

在你的js中你可以使用这个代码

var radios = $('[type=radio]');
radios.each(function(){
    $(this).change(function(){
        radios.filter(':not(:checked)').show().prev().hide();
        if($(this).is(':checked')) {
            $(this).hide()
            .prev()
             .css('display','inline-block');
        }
    });
});

Answer 5

我已经问过我的兄弟了。他鼓励我用这个尽可能简单的解决方案。他寄给我的小提琴 http://jsfiddle.net/jdqg6bsh/12/

$('label').click(function(event){
    $('label').removeClass('active');
    $(this).addClass('active')
})

还有这个http://jsfiddle.net/jdqg6bsh/10/ 纯css：

.circle{
    display: none;
    height: 13px;
    width: 13px;
    background-color: transparent;    
    border-radius: 50%;
    margin: 3px 3px 0px 5px;
}

input[type=radio]:checked{
    position: absolute;
    top: -9999px;
}

input[type=radio]:checked + .circle{
    background-color: green;
    display: inline-block;
}

label{
    display: block
}

希望除我之外的其他人也能从中受益。