有一个问题与javascript Jquery和php按钮的复选框

jQuery(".cb-disable").click(function(){
var parent = jQuery(this).parents('.switch');
var vid =this.id;
jQuery('#'+vid).attr('id','');
jQuery('#'+vid).attr('id','');
jQuery('.cb-enable',parent).removeClass('selected');
jQuery(this).addClass('selected');
jQuery('input[name='+vid+'-off]').attr('checked', true)
jQuery('input[name='+vid+'-on]').removeAttr('checked');
jQuery('input[name='+vid+']').attr('name', vid+"-on");
jQuery('input[name='+vid+'-off]').attr('name', vid);
});
});

<p class="wpptabs_hoverable-286 switch">
    <input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
    <input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286-off" value="off">
    <label for="ON" id="" class="cb-enable"><span>ON</span></label>
    <label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>

你的名字必须是相同的每个无线电输入，否则他们独立行动(这意味着他们可以显示开和关状态)—在下面的代码中，我删除了off无线电名称中的-off部分:

<p class="wpptabs_hoverable-286 switch">
  <input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
  <input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286" value="off">
  <label for="ON" id="" class="cb-enable"><span>ON</span></label>
  <label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>

你可以看到打开和关闭按钮现在像预期的那样工作了:

http://jsfiddle.net/S8qFT/

更新看来让收音机工作并不是你唯一的问题。我已经简化了javascript，所以它只做它需要的，它应该工作，你现在需要的 http://jsfiddle.net/65JRx/

javscript

/// make sure we apply the click handling to both on and off labels
$(".cb-enable,.cb-disable").click(function(){
    /// find the elements we need
    var self = $(this);
    var parent = self.parents('.switch');
    /// handle the selected highlight, first remove all selected
    parent.find('.selected').removeClass('selected');
    /// then select the right one again
    self.addClass('selected');
    /// most modern browsers should handle transfering the label click
    /// to the actual radio (via `for` and `id`), but just in case.
    if ( self.is('.cb-enable') ) {
        parent.find('input[value=on]').prop('checked', true);
    }
    else {
        parent.find('input[value=off]').prop('checked', true);
    }
});

标记

<div class="wpptabs_hoverable-286 switch">
    <!-- I've laid these inputs out just to make them
    easier to read, I wouldn't normally lay markup out
    this way //-->
    <input 
        type="radio" 
        class="on286" 
        name="wpptabs_hoverable-286" 
        id="wpptabs_hoverable-286-on" 
        value="on" 
        checked="checked"
    />
    <!-- I've renamed your IDs to have more specific names
    this will mean you can use this method on more than
    one set of inputs -- as long as you keep the IDs inline
    with your id convention. //-->
    <input 
        type="radio" 
        class="off286" 
        name="wpptabs_hoverable-286" 
        id="wpptabs_hoverable-286-off" 
        value="off" 
    />
    <label 
        for="wpptabs_hoverable-286-on"
        class="cb-enable selected">
        <span>ON</span>
    </label>
    <label 
        for="wpptabs_hoverable-286-off"
        class="cb-disable">
        <span>OFF</span>
    </label>
</div>

css

/**
 * Added a highlight so you can see selected working
 */
label.selected { color: blue; }
/** 
 * I've removed the display none so you can still see the inputs
 * working as they should. Obviously you can put the display none
 * back to get your working version.
 */
.switch input{/*display: none;*/ opacity: 0.5; position: relative;}