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元素（已点击）。

等效代码段：

＆＃13;

$('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');
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

你需要＆＃34;取消选择＆＃34;在进行新选择之前的输入元素。这里有一个代码更新的小提琴：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 3

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

希望除了我以外的人也觉得有帮助。

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

5 个答案: