1

有什么方法可以调用函数并同时通过单击标签来保存单选按钮的效果?

示例(我需要通过单击单选按钮的标签来打开/关闭带有复选框的字段集)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 过渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http ://www.w3.org/1999/xhtml">
<head>
<title>点击标签</title>
<script src="/js/jquery-1.3.2.min.js" type="text/ javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
accordionOptions();
});

function AccordionOptions(){
$("label.legend, label.childless").click( function(event){
var 对立 = $(".subtype").not($(this).next());
var el = $(this) ; contrasts.find(
"input:checked").attr('checked', false) ; contrasts.removeClass(
"expanded");
el.siblings("label").removeClass("expanded") ;
el.next(".subtype").toggleClass("expanded");
el.toggleClass("expanded");
});
}
</script>
<style type="text/css">
<!--
HTML { text-align: center}
BODY { background: #FFF; 颜色:#494949;字体:.813em/140% Arial、Helvetica、sans-serif;文本对齐:左;利润:4em自动;
宽度:240px}标签{显示:块;边距底部:.6em}
.subtype { display: none}
.expanded { display: block !important}
.label.expanded { /*样式化选定的字段集标题*/}
-->
</style>
</head>

<body>
<form action="" method="post">
<fieldset>
<label class="legend expand"><input name="rb_item" type="radio" value="" checked="checked" />项目 0100</label>
<fieldset class="subtype expand">
<label><input name="item01" type="checkbox" value="" />项目 0101</label>
<label><input name=" item01" type="checkbox" value="" />项目 0102</label>
</fieldset>
<label class="childless"><input name="rb_item" type="radio" value="" />项目0200</label>
<标签类="legend"><input name="rb_item" type="radio" value="" />Item 0300</label>
<fieldset class="subtype">
<label><input name="item03" type="checkbox" value="" />项目 0301</label>
<label><input name="item03" type="checkbox" value="" />Item 0302</label>
</fieldset>
<button type="submit">提交</button>
</fieldset>
</表格>
</正文>
</html>

4

4 回答 4

3

问题e.preventDefault();在于它会阻止标签单击检查单选按钮。

更好的解决方案是简单地添加一个“已检查”快速检查,如下所示:

$("label").click(function(e){
  var rbtn = $(this).find("input");
  if(rbtn.is(':checked')){
    **All the code you want to have happen on click**
  }
)};
于 2013-01-05T23:17:04.360 回答
2

改为使用单选按钮上的焦点事件。

尝试这个:

<script type="text/javascript">
    $(function(){ 
        accordionOptions();
    });
    var accordionOptions = function(){
        $("label.legend > input, label.childless > input").focus(function(event) {
            var el = $(this).parent();
            var opposites = $(".subtype").not(el.next());
            opposites.find("input:checked").attr("checked", false);
            opposites.removeClass("expanded");
            el.siblings("label").removeClass("expanded");
            el.next(".subtype").toggleClass("expanded");
            el.toggleClass("expanded");
        });
    }
</script>
于 2009-08-04T03:12:30.570 回答
0

这对我有用:

$("label.legend, label.childless").click( function(event){
  var opposites = $(".subtype").not($(this).next());
  var el = $(this);
  opposites.find("input:checked").removeAttr('checked');
  opposites.removeClass("expanded");
  el.siblings("label").removeClass("expanded");
  el.next(".subtype").addClass("expanded");
  el.toggleClass("expanded");
});    

那就是将toggleClass交换为addClass。

于 2009-12-08T11:12:15.867 回答
0
- $("label.legend, label.childless").click( function(event){
+ $("label, input").click( function(event){

......然后是一些化妆品来保持无线电标签的位置。

于 2009-08-03T19:59:50.453 回答