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

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

Answer 1

演示您需要在复选框状态更改时注册活动：http://jsfiddle.net/FtPLS/2/ 或 http://jsfiddle.net/QCkpG/1/

我还认为您应该使用.next代替.children。
如果您想隐藏.checked，请执行此操作=＆gt; $('.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 2

对于上述问题，我已经在代码中完成了解决方案。所以，试试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 3

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

然后你有默认的无线电，如果他们被检查，标签就取代了......

选中单选按钮显示div

4 个答案: