隱藏輸入選擇不正確的自定義複選框。 Javascript需要調整

我使用自定義複選框，input隱藏在span中;我已經編寫了一個腳本來爲checked添加類，但它實際上並未將輸入標記爲已檢查。我在這裏做錯了什麼？隱藏輸入選擇不正確的自定義複選框。 Javascript需要調整

更新：所以複選框現在檢查！萬歲。一個新問題是隱藏複選框的可見性，當在複選框的區域上選中時隱藏新類...如果單擊標籤，則該複選框顯示爲選中狀態，但是如果單擊複選框圖像本身，沒有什麼變化...

HTML

<fieldset> 
    <label class="sublabel" title="Insights & Planning" for="checkbox-insights-and-planning">Insights & Planning</label> 

    <span class="open-checkbox"> 
    <input id="checkbox-insights-and-planning" class="key-areas-checkbox" name="key-areas-of-interest" type="checkbox" /> 
    </span> 
</fieldset>

CSS

.open-checkbox { 
    background-position: -4px -48px; 
    background-image: url(../images/adcolor-sprite.png); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    display: block; 
    float: right; 
    height: 25px; 
    margin-top: 10px; 
    width: 25px; 
} 

.checked { 
    background-position: -4px -12px; 
    background-image: url(../images/adcolor-sprite.png); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    display: block; 
    float: right; 
    height: 25px; 
    margin-top: 10px; 
    width: 25px; 
} 

input[type=checkbox] { 
    visibility: hidden; 
} 

#key-areas-inputs label.sublabel { 
    display: block; 
    float: left; 
    height: 44px; 
    padding: 0 0 0 10px; 
    width: 300px; 
} 
#key-areas-inputs input.key-areas-checkbox { 
    float: right; 
    display: block; 
    clear: none; 
    height: 22px; 
    width: 22px; 
    margin-top: 18px; 
    margin-right: 4px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
} 
#key-areas-label { 
    font-family: "Futura W01 Bold", Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    color: #df007c; 
    display: block; 
    clear: left; 
    float: left; 
    width: 348px; 
    margin-top: 50px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding-top: 0px; 
    padding-right: 30px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    text-align: right; 
}

// check checked boxes on load  
    $(".key-areas-checkbox:checked").each(function(){ 
     $(this).next().addClass('checked'); 
    }); 

    // add class and checked attribute to filter inputs 
    $('.open-checkbox').click(function() { 
     console.log('click'); 
     var $this = $(this); 
     var $input = $this.find('input'); 

     $this.toggleClass('checked', $input.is(':checked')); 
     return; 

     if($input.prop('checked')){ 
      $this.removeClass('checked'); 
     } else { 
      $this.addClass('checked'); 
     } 
    });

來源

2013-09-16 boy

你能否給我們提供一個[jsfiddle]（http://jsfiddle.net） – Krishna

您的for和id s不匹配。將你的id更改爲「checkbox-insights-and-planning」（缺少's'），它應該可以工作。

還要確保你的圖像路徑是正確的（我們不能用你的示例代碼測試它，因爲它是一個相對路徑;我只是用背景色嘗試過它，它工作正常）。

來源

2013-09-16 18:23:02 keirog

這很有幫助;但是，隱藏複選框{visibility：hidden;}也隱藏圖像交換... – boy

檢查複選框添加：

$input.attr('checked','checked');

取消選中：

$input.removeAttr('checked');

來源

2013-09-16 18:29:38

我想出什麼問題了。 JS很好。解決方法是將inputs嵌套在label的內部，並將其包裝在div.的內部。這產生了所需的效果。

來源

2013-09-16 20:58:53 boy

隱藏輸入選擇不正確的自定義複選框。 Javascript需要調整

回答

相關問題