Question

有没有办法调用一个函数，同时通过点击标签来保存对radiobutton的影响？

示例（我需要通过单击radiobuttons的标签来打开/关闭带有复选框的字段集）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Click on Label</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 opposites = $(".subtype").not($(this).next());

var el = $(this);

opposites.find("input:checked").attr('checked', false);

opposites.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; color: #494949; font: .813em/140% Arial, Helvetica, sans-serif; text-align: left; margin: 4em auto; width: 240px}

LABEL { display: block; margin-bottom: .6em}

.subtype { display: none}

.expanded { display: block !important}

.label.expanded { /*styling selected fieldset heading*/}

-->

</style>

</head>
<body>

<form action="" method="post">

<fieldset>

<label class="legend expanded"><input name="rb_item" type="radio" value="" checked="checked" />Item 0100</label>

<fieldset class="subtype expanded">

<label><input name="item01" type="checkbox" value="" />Item 0101</label>

<label><input name="item01" type="checkbox" value="" />Item 0102</label>

</fieldset>

<label class="childless"><input name="rb_item" type="radio" value="" />Item 0200</label>

<label class="legend"><input name="rb_item" type="radio" value="" />Item 0300</label>

<fieldset class="subtype">

<label><input name="item03" type="checkbox" value="" />Item 0301</label>

<label><input name="item03" type="checkbox" value="" />Item 0302</label>

</fieldset>

<button type="submit">Submit</button>

</fieldset>

</form>

</body>

</html>

Answer 1

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

Answer 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>

Answer 3

- $("label.legend, label.childless").click( function(event){
+ $("label, input").click( function(event){

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

Answer 4

这最终适用于：

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

正在为addClass交换toggleClass。

标签点击两次点击功能

4 个答案: