Как получить представление по умолчанию при нажатии на другую метку?

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

определять входные радиоприемники с таким же именем, как этот

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

Перед созданием нового выбора вам необходимо «отменить выбор» элементов ввода. вот скрипка с обновлением коды: 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 5

I попросили мой b Ротер. Он поощряет меня с таким решением, которое как можно проще. Скрипку он послал мне 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 
} 

Желание кого-то, кроме меня, также будет полезно.