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

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

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 2

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

<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 3

您需要 "unselect" 输入元素才能进行新的选择。这里有一个 fiddle 更新了您的代码：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

一个更简单的解决方案是删除 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 5

我问过我哥了。他用这个尽可能简单的解决方案鼓励我。他发给我的fiddle 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
}

希望除我之外的其他人也觉得它有帮助。

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

How to get default view when clicking on another label?

jquery

input

radio