Метка запускает функцию щелчка дважды - PullRequest
Новая
       35

Метка запускает функцию щелчка дважды

1 голос
/ 03 августа 2009

Можно ли вызвать функцию и одновременно сохранить эффект на радиокнопке, щелкнув метку?

Пример (мне нужно открывать / закрывать наборы полей с флажками, щелкая метки для радиокнопок) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Click on Label</title><br />
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){ <br />
accordionOptions();<br />
});</p>
<p>function accordionOptions(){<br />
$("label.legend, label.childless").click( function(event){<br />
var opposites = $(".subtype").not($(this).next());<br />
var el = $(this);<br />
opposites.find("input:checked").attr('checked', false);<br />
opposites.removeClass("expanded");<br />
el.siblings("label").removeClass("expanded");<br />
el.next(".subtype").toggleClass("expanded");<br />
el.toggleClass("expanded");<br />
}); <br />
}<br />
</script><br />
<style type="text/css"><br />
<!--<br />
HTML { text-align: center}<br />
BODY { background: #FFF; color: #494949; font: .813em/140% Arial, Helvetica, sans-serif; text-align: left; margin: 4em auto; width: 240px}<br />
LABEL { display: block; margin-bottom: .6em}<br />
.subtype { display: none}<br />
.expanded { display: block !important}<br />
.label.expanded { /*styling selected fieldset heading*/}<br />
--><br />
</style><br />
</head></p>
<p><body><br />
<form action="" method="post"><br />
<fieldset><br />
<label class="legend expanded"><input name="rb_item" type="radio" value="" checked="checked" />Item 0100</label><br />
<fieldset class="subtype expanded"><br />
<label><input name="item01" type="checkbox" value="" />Item 0101</label><br />
<label><input name="item01" type="checkbox" value="" />Item 0102</label><br />
</fieldset><br />
<label class="childless"><input name="rb_item" type="radio" value="" />Item 0200</label><br />
<label class="legend"><input name="rb_item" type="radio" value="" />Item 0300</label><br />
<fieldset class="subtype"><br />
<label><input name="item03" type="checkbox" value="" />Item 0301</label><br />
<label><input name="item03" type="checkbox" value="" />Item 0302</label><br />
</fieldset><br />
<button type="submit">Submit</button><br />
</fieldset><br />
</form><br />
</body><br />
</html>

Ответы [ 4 ]

3 голосов
/ 06 января 2013

Проблема с 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**
  }
)};
2 голосов
/ 04 августа 2009

Вместо этого используйте переключатель фокусировки на переключателе.

Попробуйте это: 

<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>
0 голосов
/ 08 декабря 2009

Это работает в моем конце: 

$("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.

0 голосов
/ 03 августа 2009 
- $("label.legend, label.childless").click( function(event){
+ $("label, input").click( function(event){

... а затем немного косметики, чтобы держать радио-этикетки на месте.

...