0

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

<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) 并显示它。我弄错了吗？`

4

4 回答 4

0 
$(function(){
  $(':radio').change(function(){
    var $this = $(this);
    console.log($this);
    $(':radio[name='+this.name+']').next().hide();
    if($this.is(':checked')){
      $this.next('.checked').show();
    }
  });
});
于 2012-07-09T11:14:43.603 回答
0

在我看来，您正在尝试获得自定义样式的单选按钮？我在一个项目中没有 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;
}

然后你有默认收音机，如果它们被选中，标签就会取代它们......

于 2012-07-09T11:23:59.160 回答
0

演示您需要在复选框状态更改时注册一个事件：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();
        }
    });
});​
于 2012-07-09T10:50:15.100 回答
0

对于上述问题，我已经完成了代码箱的解决方案。所以，在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();
            }
        });
    });
});
于 2012-07-09T11:08:51.510 回答