jQuery手机更改单选按钮的CSS属性

问题描述：

有谁知道如何更改jQuery手机单选按钮组的CSS属性？我正在尝试使用以下代码突出显示红色的收音机组，但未成功。任何想法，将不胜感激！jQuery手机更改单选按钮的CSS属性

//radio button array 
var radio_groups = {}; 

//find each radio button in the section of the form i want the code to look at 
$('#myID' + myCodeGeneratedNumber).find(":radio").each(function(){ 
     //fill array 
     radio_groups[this.name] = true; 
}); 

//loop through each radio button 
for(group in radio_groups){ 

     //check to see if a button is checked or not 
     if (!!$(":radio[name="+group+"]:checked").length) { 
      //not working - should add a green highlight 
      $(":radio[name="+group+"]").css('box-shadow', '0px 0px 0px #FF7575'); 
     } 
     else{ 
      isValid = false 
      //not working - should add a red highlight 
      $(":radio[name="+group+"]").css('box-shadow', '0px 0px 4px #A7E9A7'); 
     } 
}

答

奥斯汀，基于你的小提琴，这里是一个解决方案。

我修改了if条件（您有两个!）。

对于颜色，我导航到图标（在标签内，而不是输入）以更改其颜色。

$(function() { 
    $("input[name=jquery-submit]").on("click", function() { 
     $.post('test.php', $("form[name=form1]").serialize(), function (data) { 
      alert(data); 
     }).error(function() { 
      alert("Error submiting the form"); 
     }); 
     //return false; 
    }); 

    $('a[id^="btnPage"]').click(function() { 
     var groupNum = +($(this).attr('id').replace('btnPage', '')) - 1; //get the group number to validate 
     var isValid = true; //added local variable to track validation 
     $('#group' + groupNum + ' input[type=text]').each(function() { 
      if (this.value === '') { 
       isValid = false; //form was not valid 
       $(this).css('background-color', '#FF7575'); 
       shake(this); 
      } else { 
       $(this).css('background-color', '#A7E9A7'); 
      } 
     }); 

     var radio_groups = {}; 
     $('#group' + groupNum).find(":radio").each(function() { 
      radio_groups[this.name] = true; 
     }); 

     for (var group in radio_groups) { 
      if (!$(":radio[name=" + group + "]:checked").length) { 
       isValid = false; 
       $("input:radio[name=" + group + "]").each(function() { 
        $(this).next().find('.ui-icon').css('background-color', '#FF7575'); 
        shake($(this).next()); 
       }); 
      } else { 
       $("input:radio[name=" + group + "]").each(function() { 
        $(this).next().find('.ui-icon').css('background-color', ''); 
       }); 
      } 
     } 

     if (!isValid) { //when form is not valid, return false 
      return false; 
     } 
    }); 
}); 

function shake(div) { 
    var interval = 100; 
    var distance = 10; 
    var times = 4; 
    $(div).css('position', 'relative'); 
    for (var iter = 0; iter < (times + 1); iter++) { 
     $(div).animate({ 
      left: ((iter % 2 == 0 ? distance : distance * -1)) 
     }, interval); 
    } 
    $(div).animate({ 
     left: 0 
    }, interval); 
}

http://jsfiddle.net/o2apxu73/13/

编辑：添加shake呼叫时没有无线电选择

和小编辑如检查时=>选择我最初的解决方案并不好VAL =>查看=>变化值 – 2014-09-03 13:08:46

谢谢这么多......就像一个魅力！任何想法如何应用摇摆功能我也有单选按钮标签？ – Austin 2014-09-03 13:28:43

看到我编辑的答案和小提琴（只需要一个'shake（$（this）.next（））;'） – 2014-09-03 13:38:32

答

对于一个单选按钮可见DOM元素实际上是<label>，而不是<input>。因此，在设置CSS时，您需要定位<label>。一种方法是用ui-radio类来获得父母的包装，然后找到<label>内它：

$(':radio[name="gender"]').parent(".ui-radio").find("label").css('box-shadow', '0px 0px 3px #FF7575');

您还可以使用siblings()功能：

$(':radio[name="gender"]').siblings("label").css('box-shadow', '0px 0px 3px #FF7575');

这里是一个DEMO

jQuery手机更改单选按钮的CSS属性

相关推荐