如何更改此功能以便我可以从父元素调用它?

时间:2013-02-26 22:10:08

标签: javascript jquery function call children

我正在使用此功能替换标准html复选框,我想从label for属性而不是当前所在的<div>调用它。

我不确定如何修改它,以便我可以呼叫孩子<div>而不是onclick="toggle_colorbox(this);"。我正在使用它来获取大量复选框,因此我不想通过id调用它。

HTML

<label for="color_Black"><div style="background-color: #000000" class="color" onclick="toggle_colorbox(this);"><div class=CheckMark>&#10003;</div>
<input type="checkbox" name="color[]" value="Black" id="color_Black" class="cbx"/></div>Black</label>

JS

function toggle_colorbox(span) {
    div = span.getElementsByTagName('div')[0];
    cb = span.getElementsByTagName('input')[0];
    if (cb.checked == false) {
        div.style.visibility = "visible";
        span.className = "color ColorboxSelected";
        cb.checked = true;
    }
    else {
        div.style.visibility = "hidden";
        span.className = "color";
        cb.checked = false;
    }
}

CSS

.color { border: 1px solid silver; vertical-align:baseline; margin-right:4px; width: 1.65em; height:1.65em; font-size:8px;float:left;  }
.color input {height: 100%; width: 100%; font-size:200%;}
.ColorboxSelected {opacity: 0.5; filter: alpha(opacity = 50);}  
.ColorboxSelected .CheckMark {visibility: visible; }        
.CheckMark {position:relative; top:-2px; vertical-align:middle; text-align:center ; color:white; font-family: Arial Narrow; font-size:1.6em;  display:block; visibility:hidden; }   /* text-shadow: black 0.1em 0.1em 0.2em;*/
.cbx { visibility:hidden; display:none;}

2 个答案:

答案 0 :(得分:1)

您可以执行以下操作。这将设置切换功能,以便在点击类toggle的任何标签时触发。它会直接在该标签中查找div和复选框。

HTML:

<label class="toggle" for="color_Black"><div style="background-color: #000000" class="color"><div class=CheckMark>&#10003;</div>
<input type="checkbox" name="color[]" value="Black" id="Checkbox1" class="cbx"/></div>Black</label>

JS:

$(".toggle").on("click", function toggle_colorbox() {
    $div = $(this).children('div');
    $cb = $(this).find('input');
    $innerdiv = $div.find('div');

    if (!$cb.is(':checked')) {    
        $innerdiv.show();
        $div.addClass("ColorboxSelected");
        $cb.prop('checked', true);
    }
    else {
        $innerdiv.hide();
        $div.removeClass("ColorboxSelected");
        $cb.prop('checked', false);
    }
    return false;

});

小提琴:http://jsfiddle.net/aLJwH/1/

编辑:现在回答工作代码!

答案 1 :(得分:1)

如果你想从标签上调用它,你可以像这样得到孩子DIV ......

<label for="color_Black" onclick="toggle_colorbox(this.children[0]);">