检查单选按钮显示一个div

Question

我有这个标记的我的网页之一，

<div class="radio-spoof"> 
    <input type="radio" name="enquiry" value="General enquiry" class="radio"/> 
    <div class="checked"></div> 
</div> 
<label for="general_enquiry">General enquiry</label> 
<div class="radio-spoof"> 
    <input type="radio" name="enquiry" value="Request a brochure" class="radio" checked="true"/> 
    <div class="checked"></div> 
</div> 
<label for="request_a_brochure">Request a brochure</label> 

基本上我在做什么是试图欺骗一些单选按钮，这样我就可以有很好看的，当无线电已选中我要显示.checked默认设置为display:none。我需要检查DOMReady上的一个选中的单选按钮，并且当单击收音机时，目前我有这个页面，但它似乎没有正确地选择.checked div。

if($('input[type=radio]:checked')) {
console.log("!");
$(this).parent().children('div').show();
}

我希望上面的选择单选按钮父的代码，然后找一个孩子DIV（.checked），并显示它。我错了吗？ `

Answer 1

$(function(){ 
    $(':radio').change(function(){ 
    var $this = $(this); 
    console.log($this); 
    $(':radio[name='+this.name+']').next().hide(); 
    if($this.is(':checked')){ 
     $this.next('.checked').show(); 
    } 
    }); 
}); 

Answer 2

演示你需要时复选框状态变化来注册事件：http://jsfiddle.net/FtPLS/2/或http://jsfiddle.net/QCkpG/1/

• 我也想你应该使用.next而不是.children。
，如果你想隐藏 .checked
• 只是这样做=>$('.checked').hide()
• 你可以使用$('input[type=radio]').is(':checked')您选中/清除条件。

希望这有助于事业，:)

代码

$(function() { 
    // here ==> $('.checked').hide(); will hide all the div with checked class 
    $('input').click(function() { // can use .change instead if you want 
     if ($('input[type=radio]').is(':checked')) { 
      alert('!') 
      $(this).parent().next('div').show(); // whatever you wanna show or 
      //$(this).next('div').show(); 
     } 
    }); 
});​ 

Answer 3

对于上述问题，我已经做了codebins解决方案。因此，尝试在http://codebins.com/codes/home/4ldqpb6

解决方案：

$(document).ready(function() { 
    $('input[type=radio]').each(function() { 
     if ($(this).is(':checked')) { 
      $(this).next('.checked').show(); 
     } 
     $(this).click(function() { 
      if ($(this).is(':checked')) { 
       $(this).next('.checked').show(); 
      } 
     }); 
    }); 
}); 

Answer 4

在我看来，你想获得定制风格的单选按钮？没有JS一个很酷的方式，我曾在一期工程已于本（适用于您的代码）：

HTML

<div class="radio-spoof"> 
    <input id="radio-1" type="radio" name="enquiry" value="General enquiry" class="radio"/> 
    <label for="radio-1">General enquiry</label> 
</div> 

CSS

.radio-spoof input { 
    position: absolute; 
    left: -9999px; 
} /* not display: none so it is tabbable */ 

.radio-spoof label { 
    display: inline-block; 
    padding-left: 35px; /* width of your custom image + spacing to text */ 
    height: 30px; 
    line-height: 30px; /* height of your custom image */ 
    background: url(your/custom/image) center left no-repeat; 
} 

.radio-spoof input:checked + label { 
    background-image: url(your/custom/active/image); 
} 

复选框每次切换标签被点击，它们通过输入ID和标签连接，标签获得输入样式。

如果你想复选框看起来像默认的，如果不是在检查，他们就可以将其设置是这样的：

CSS

.radio-spoof input + label { display: none } 

.radio-spoof input:checked { 
    position: absolute; 
    left: -9999px; 
} 

.radio-spoof input:checked + label { 
    display: inline-block; 
    padding-left: 35px; /* width of your custom image + spacing to text */ 
    height: 30px; 
    line-height: 30px; /* height of your custom image */ 
    background: url(your/custom/image) center left no-repeat; 
} 

那么你有默认的收音机，如果他们”重新检查了标签需要他们的地方......