jQuery - स्टाइल चेकबॉक्स, छवि

Question

के साथ प्रतिस्थापित करें मुझे अपने स्क्रिप्टबॉक्स को छिपाने के लिए इस स्क्रिप्ट की आवश्यकता है और इसके स्थान पर एक स्टाइल चेकबॉक्स की एक छवि डालें। यह ठीक से छुपा रहा है और डिफ़ॉल्ट छवि दिखा रहा है, लेकिन जब मैं उस पर क्लिक करता हूं तो चेकबॉक्स को चेक या अनचेक नहीं किया जाएगा, न ही यह छवि को अपडेट करेगा। मुझे लगता है कि यह एक साधारण बात है जिसे मैं देख रहा हूं, मैं अभी भी jQuery के लिए नया हूं।

यहाँ स्क्रिप्ट है:

<input type="checkbox" class="check" /> 

संपादित करें::

 $(".check").each(function() { 
      $(this).hide(); 

      var $image = $("<img src='assets/images/layout/checkbox/unchecked.png' />").insertAfter(this);  

      $image.click(function() { 
       var $checkbox = $(this).prev(".check"); 
       $checkbox.prop('checked', !$checkbox.prop('checked')); 

       if($checkbox.prop("checked")) { 
        $image.attr("src", "assets/images/layout/checkbox/checked.png"); 
       } else { 
        $image.attr("src", "assets/images/layout/checkbox/unchecked.png"); 
       } 
      }) 
     }); 

यहाँ HTML है इसके अलावा, यह आम तौर पर स्टाइल चेक बॉक्स को सबसे अच्छा तरीका है? मुझे ऐसा कुछ भी नहीं लगता है जो इससे कहीं अधिक आसान है, इसलिए किसी भी सुझाव की सराहना की जाती है।

Answer 1

यह पता चला कि मैं jQuery के दिनांकित संस्करण का उपयोग कर रहा था, जो समस्या थी। मैंने 1.7.2 तक अपडेट किया और सबकुछ काम करता था जैसा कि इसे करना चाहिए।

Answer 2

आप भी इस jQuery प्लगइन Zebra_Transform कहा जाता है जो एक पृष्ठ पर सभी चेक बॉक्स, रेडियो बटन का चयन करें और बक्से को बदल देती है इस्तेमाल कर सकते हैं, यह बहुत बहुत छोटे (3KB) है, और सभी प्रमुख ब्राउज़रों में काम करता है।

Answer 3

मैंने कई समाधानों की कोशिश की और सबसे अच्छा विकल्प लगता है: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ यह आसान है और अच्छी तरह से काम करता है।

Answer 4

पता है कि यह एक पुराना धागा है - लेकिन चेकबॉक्स को छवियों में परिवर्तित करने के लिए एक समाधान की आवश्यकता है - और यह सबसे अच्छा जवाब था। :) तो कुछ इसे दोहराया और साझा करना चाहता था।

function setCheckboxImageSrc(checkbox, image, checkedUrl, uncheckedUrl) { 
    if (checkbox.is(":checked")) { 
     image.attr("src", checkedUrl); 
    } else { 
     image.attr("src", uncheckedUrl); 
    } 
} 

function setCheckboxImage(checkboxObj, className, checkedUrl, uncheckedUrl) { 
    checkboxObj.hide(); 

    var $image = $("<img src='" + checkedUrl + "' />").insertAfter(checkboxObj); 
    setCheckboxImageSrc(checkboxObj, $image, checkedUrl, uncheckedUrl); 

    $image.click(function() { 
     var $checkbox = $image.prev("." + className); 
     $checkbox.click(); 
     setCheckboxImageSrc($checkbox, $image, checkedUrl, uncheckedUrl); 
    }); 
} 

$(".checkboxUp").each(function() { 
    setCheckboxImage($(this), "checkboxUp", "../../../images/DirectionUpChecked.png", "../../../images/DirectionUpUnchecked.png"); 
}); 

$(".checkboxDown").each(function() { 
    setCheckboxImage($(this), "checkboxDown", "../../../images/DirectionDownChecked.png", "../../../images/DirectionDownUnchecked.png"); 
});