चेकबॉक्स जैसी छवियों का उपयोग करें

Question

मैं एक मानक चेकबॉक्स का विकल्प रखना चाहता हूं - मूल रूप से मैं छवियों का उपयोग करना चाहता हूं और जब उपयोगकर्ता छवि पर क्लिक करता है, तो इसे फीका करें और एक टिक बॉक्स को ओवरले करें।

संक्षेप में, मैं कुछ करना चाहता हूं जैसे कि रिकैप्टा 2 करता है जब यह आपको एक निश्चित मानदंड को पूरा करने वाली छवियों को क्लिक करने के लिए मिलता है। आप यहाँ एक पुन: कैप्चा डेमो देख सकते हैं लेकिन यह कभी-कभी आपको पाठ प्रश्नों को हल करने के लिए मिल सकता है, जैसा कि छवि चयन के विपरीत है। तो यहाँ एक स्क्रीनशॉट है:

जब आप छवियों में से एक पर क्लिक करते हैं (इस मामले में, स्टेक की तस्वीर युक्त), तो आप जिस छवि पर क्लिक करते हैं वह आकार में सिकुड़ जाती है और नीले रंग की टिक दिखाई देती है, यह दर्शाता है कि आपने इसे टिकटिक किया है।

मान लीजिए कि मैं इस सटीक उदाहरण को पुन: प्रस्तुत करना चाहता हूं।

मुझे लगता है कि मेरे पास 9 छिपे हुए चेकबॉक्स हो सकते हैं, और कुछ jQuery संलग्न कर सकते हैं ताकि जब मैं छवि पर क्लिक करूं, तो यह छिपे हुए चेकबॉक्स का चयन करता / रद्द करता है। लेकिन छवि के सिकुड़ने / टिक ओवरले करने का क्या?

Comments

आपके पास दो समान चित्र हो सकते हैं: एक टिक के साथ और दूसरा बिना टिक के। और क्लिक पर छवियों को बदलें

— एलेक्स

@ एलेक्स एक विशेष रूप से अनम्य समाधान होगा।

— सिगुजा

क्या आपने क्लिक पर CSS वर्ग जोड़ने / हटाने की कोशिश की है जो छवि आकार को ओवरराइड करता है और :beforeटिक छवि के लिए कुछ जादू करता है ?

— Hexaholic

@ एलेक्स "अनफ़्लेक्सिबल" इस अर्थ में कि किसी भी चीज़ को बदलने के लिए बहुत अधिक काम करने की आवश्यकता होगी, जैसे संग्रह में एक नई तस्वीर जोड़ना या "टिक" आइकन बदलना, जब ऐसा नहीं होगा यदि प्रभाव प्रोग्रामिक रूप से बनाया गया हो क्रम।

— सिगुजा

@Christian किसी कस्टम चीज़ के साथ चेकबॉक्स को प्रतिस्थापित करना एक लोकप्रिय डिज़ाइन निर्णय है (भले ही यह सिर्फ एक स्टाइल चेकबॉक्स हो), और इसे करने के लिए अच्छे / सरल तरीके खोजना निश्चित रूप से उन देवताओं के लिए ब्याज की है, जिन्हें इसके साथ सौदा करना था। और यह सवाल (कुछ और पर चेकबॉक्स प्रतिस्थापन को ओवरलेइंग) निश्चित रूप से इसे एक दिलचस्प बनाता है। विशेष रूप से, इस बात पर ध्यान दें कि कार्य की स्पष्ट जटिलता के बावजूद स्वीकार किए गए उत्तर में कोई जेएस का उपयोग कैसे किया जाता है

— इज़काता

Answer 1

शुद्ध अर्थ HTML / CSS समाधान

यह अपने दम पर लागू करना आसान है, कोई पूर्व-निर्मित समाधान आवश्यक नहीं है। साथ ही यह आपको बहुत कुछ सिखाएगा क्योंकि आप सीएसएस के साथ बहुत आसान नहीं लगते हैं।

यह वह है जो आपको करना जरूरी है:

आपके चेकबॉक्स में अलग-अलग idगुण होने चाहिए। यह आपको <label>लेबल के for-attribute का उपयोग करके इसे कनेक्ट करने की अनुमति देता है ।

उदाहरण:

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

चेकबॉक्स पर लेबल संलग्न करना एक ब्राउज़र व्यवहार को ट्रिगर करेगा: जब भी कोई व्यक्ति लेबल (या इसके अंदर की छवि) पर क्लिक करता है, तो चेकबॉक्स को टॉगल किया जाएगा।

इसके बाद, आप उदाहरण के display: none;लिए आवेदन करके चेकबॉक्स छिपाते हैं ।

अब वह सब करना बाकी है जो शैली आप अपने label::beforeछद्म तत्व के लिए चाहते हैं (जिसे दृश्य चेकबॉक्स तत्वों के रूप में उपयोग किया जाएगा):

label::before {
    background-image: url(../path/to/unchecked.png);
}

अंतिम ट्रिकी चरण में, आप :checkedचेकबॉक्स चेक होने पर छवि को बदलने के लिए CSS ' छद्म चयनकर्ता का उपयोग करते हैं :

:checked + label::before {
    background-image: url(../path/to/checked.png);
}

+( आसन्न भाई चयनकर्ता ) सुनिश्चित करें कि आप केवल लेबल बदलने कि सीधे मार्कअप में छिपा चेकबॉक्स का पालन करता है।

आप दोनों छवियों को एक स्प्रीटेमैप में डालकर अनुकूलित कर सकते हैं और केवल background-positionछवि को स्वैप करने के बजाय एक परिवर्तन लागू कर सकते हैं ।

बेशक आपको लेबल को सही ढंग से display: block;लगाने और लागू करने और सही सेट करने की आवश्यकता है widthऔर height।

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

कोडपेन उदाहरण और स्निपेट, जो मैंने इन निर्देशों के बाद बनाया था, उसी तकनीक का उपयोग करते हैं , लेकिन चेकबॉक्स के लिए छवियों का उपयोग करने के बजाय, चेकबॉक्स के प्रतिस्थापन विशुद्ध रूप से सीएसएस के साथ किए जाते हैं , ::beforeलेबल पर एक बार बनाते हैं, जो एक बार जांचा जाता है content: "✓";। कुछ गोल बॉर्डर और मीठे संक्रमण जोड़ें और परिणाम वास्तव में पसंद है!

यहाँ एक काम करने वाला कोडपेन है जो तकनीक दिखाता है और चेकबॉक्स के लिए छवियों की आवश्यकता नहीं है:

http://codepen.io/anon/pen/wadwpx

यहाँ एक स्निपेट में समान कोड है:

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>

Comments

खुश हूँ कि आपने इसे पसंद किया! सीएसएस के साथ और अधिक चक्कर लगाना शुरू करें, यह बहुत मज़ेदार है और सीएसएस बहुत अधिक कर सकता है जितना आप कभी उम्मीद करेंगे (ऊर्ध्वाधर केंद्र को छोड़कर, यह सिर्फ बहुत मुश्किल है;))।

— कोन्नेक्सो

हाँ, और आपके काम करने के तरीके को समझने से आपको भविष्य में हर बार क्लिक करने पर कुछ DOM एक्शन चाहिए। और आपने सोचा था कि आप केवल :hover:) पर ही प्रतिक्रिया दे सकते हैं

— Conexo

यह मेरी अगली बात होगी

— प्लुरलसिटी

यह बहुत अच्छा है! मैंने एक छोटी सी समस्या पर ध्यान दिया जब आप एक ही लेबल को दो बार क्लिक करते हैं, तो यह छवि का चयन करता है। यह इसे ठीक करता है: codepen.io/anon/pen/jPmNjg

— K

टिक एसवीजी के रूप में बेहतर दिखाई देता। CSS सामग्री आपको कुछ भयानक सिस्टम फोंट की दया पर रखती है।

— एड्रिया

Answer 2

शुद्ध सीएसएस समाधान

तीन साफ ​​सुथरे उपकरण हैं:

1. :checkedचयनकर्ता
2. ::beforeछद्म चयनकर्ता
3. सीएसएस contentसंपत्ति।

label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
  position: absolute;
  z-index: 100;
}
:checked+label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
  display: none;
}
/*pure cosmetics:*/
img {
  width: 150px;
  height: 150px;
}
label {
  margin: 10px;
}

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
</label>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">
</label>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
</label>

Comments

इन चेकबॉक्सों में रेडियो बटन व्यवहार जोड़ना कैसे संभव है? मेरा मतलब है कि जब आप एक छवि पर क्लिक करते हैं तो पहले से ही चयनित छवि का चयन रद्द हो जाता है।

— लिबर्टाड

जो कोई भी खुद को @Libertad के रूप में एक ही सवाल पूछ रहा है, बस इनपुट प्रकार को रेडियो में बदलें और उन्हें सभी समान नाम दें "विशेषता" <input type="radio" name="myRadio" id="myRadio1" />भी बुलेट को छिपाने के लिए अपने सीएसएस को बदल दें:input[type=radio]{display: none;}

— लो

Answer 3

: इस jQuery प्लगइन देखें imgCheckbox (पर NPM और बोवर )

अस्वीकरण: इस समस्या को हल करने के लिए कोई जावास्क्रिप्ट आवश्यक नहीं है। तनाव बनाए रखने और कोड की दक्षता के बीच है। हालांकि, प्लगइन (या किसी जावास्क्रिप्ट) की कोई आवश्यकता नहीं है, यह सुनिश्चित करता है कि इसे बनाने के लिए तेज़ी से और अक्सर बदलने में आसान होता है।

करेले का घोल:

बहुत ही सरल HTML के साथ (चेकबॉक्स और लेबल आदि के साथ कोई भी गड़बड़ नहीं):

<img class="checkable" src="http://lorempixel.com/100/100" />

आप jQuery के उपयोग कर सकते हैं toggleClass एक बंद / चालू करने के लिए selectedया checkedपर वर्ग clickघटना:

$("img.checkable").click(function () {
    $(this).toggleClass("checked");
});

चेक किए गए आइटम के साथ लाया जाता है

$(".checked")

प्लस शीतलता:

आप इस के आधार पर छवियों शैली दे सकते हैं, लेकिन एक बड़ी समस्या यह है कि अन्य डोम तत्वों के बिना तुम भी उपयोग नहीं कर सकते है ::beforeऔर ::afterजांच के निशान की तरह सामान जोड़ने के लिए। समाधान आपकी छवियों को किसी अन्य तत्व के साथ लपेटने के लिए है (और यह लिस्ट श्रोता को लिपटे तत्व के साथ संलग्न करने के लिए समझ में आता है)।

$("img.checkable").wrap("<span class='fancychecks'>")

यह आपके html को वास्तव में साफ छोड़ देता है और आपका js अविश्वसनीय रूप से पठनीय है। स्निपेट पर एक नजर ...

/* Note that this js actually responds
   to a click event on the wrapped element!
   (not the image) */
$("img.checkable").wrap("<span class='fancychecks'>")
  .parent().click(function() {
    $(this).toggleClass("checked");
  });

/* style the images */
span.fancychecks img {
  display: block;
  margin: 0;
  padding: 0;
  transition-duration: 300ms;
  transform: scale(1);
  filter: none;
  -webkit-filter: grayscale(0);
}
span.fancychecks.checked img {
  transform: scale(0.8);
  filter: gray;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* style the parent spans */
span.fancychecks {
  padding: 0;
  margin: 5px;
  display: inline-block;
  border: 1px solid transparent;
  transition-duration: 300ms;
}
span.fancychecks.checked {
  border-color: #ccc;
}

/* Using conexo's fantastic CSS, make the checkmarks */
span.fancychecks::before {
  background-color: rgba(50, 200, 50, 0.7);
  color: white;
  content: "✓";
  font-weight: bold;
  border-radius: 50%;
  position: absolute;
  margin: 2px;
  top: 1;
  left: 1;
  z-index: 1;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transform: scale(0);
  transition-duration: 300ms;
}
span.fancychecks.checked::before {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="checkable" src="http://lorempixel.com/100/100/city/1" />
<img class="checkable" src="http://lorempixel.com/100/100/city/2" />
<img class="checkable" src="http://lorempixel.com/100/100/city/3" />

ImgCheckbox jQuery प्लगइन का उपयोग करना :

ऊपर दिए गए समाधान से प्रेरित होकर, मैंने एक प्लगइन बनाया है जिसे आसानी से उपयोग किया जा सकता है:

$("img").imgCheckbox();

• आपके प्रपत्र में जाँच की गई छवियों के लिए डेटा इंजेक्ट करता है
• कस्टम चेक मार्क का समर्थन करता है
• अनुकूलित सीएसएस का समर्थन करता है
• परित्यक्त तत्वों का समर्थन करता है
• छवियों के सरल टॉगल करने के बजाय रेडियो समूहों का समर्थन करता है
• ईवेंट कॉलबैक है
• संवेदनशील चूक
• हल्के और सुपर उपयोग करने में आसान

इसे कार्रवाई में देखें (और स्रोत देखें )

Comments

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

— कोन्नेक्सो

यह सच है, यह प्लगइन के लिए मेरी टूडू सूची पर है - फॉर्म सबमिट करने के लिए और फॉर्म में डेटा इंजेक्ट करने के लिए। लेकिन आप सही हैं, चेकबॉक्स रूपों के लिए अर्थपूर्ण हैं

— jcuenod

मैंने आपके प्लगइन का उपयोग करने की कोशिश की, लेकिन अगर मैं इनिशियलाइज़ेशन के बाद और अधिक इमेजेज जोड़ रहा हूँ, तो पिछले इंस्टेंस को नष्ट करने का कोई तरीका प्रतीत नहीं होता है ताकि नई इमेज को शामिल किया जा सके

— Ian Kim

@IanKim दिलचस्प उपयोग मामला, क्या आप इस बारे में अधिक बता सकते हैं कि आप गितुब पर एक मुद्दे में क्या करने की कोशिश कर रहे हैं? github.com/jcuenod/imgCheckbox

— jcuenod

यह एक भयानक प्लगइन है! कृपया वेबर =) प्रकाशित करें

— naXa

Answer 4

मैं एक अतिरिक्त डिव के साथ जुड़ूंगा position: relative;और class="checked"जिसकी चौड़ाई / ऊंचाई उतनी ही होगी, जितनी छवि में और left: 0; top: 0;आइकन वाले स्थान की तुलना में होगी । इसके साथ शुरू होता है display: none;।

अब आप click-event को सुन सकते हैं :

$( '.captcha_images' ).click( function() {
    $(this + '.checked').css( 'display', 'block' );
    $(this).animate( { width: '70%', height: '70%' } );
});

इस तरह आप आइकन प्राप्त कर सकते हैं और छवि को छोटे तरीके से आकार भी दे सकते हैं।

सूचना: बस आपको मेरे विचारों के पीछे "तर्क" दिखाना था, यह उदाहरण काम नहीं कर सकता है या इसमें कुछ कीड़े हैं।

Comments

मैंने जिस तकनीक का प्रदर्शन किया है वह इतनी सरल और मजबूत है, यह अक्सर उन स्थितियों में भी लागू होती है जहां आपके पास कोई चेकबॉक्स नहीं होता है, जैसे कि अन्य तत्वों और जैसे प्रदर्शन का प्रदर्शन। यह usecase है जहां यह न केवल सबसे आसान, सबसे लचीला समाधान है, बल्कि शब्दार्थ भी सबसे अच्छा है।

— कोन्नेक्सो

हाँ तुम सही हो। पहले तो मैं आपका पहला उत्तर बताना चाहता था और उसमें सुधार (संपादन से पहले) करना चाहता था, क्योंकि मुझे No-JS और अच्छे शब्दार्थ तरीके पसंद हैं, लेकिन जितना मैंने पढ़ा कि ओपी jQuery में कुछ चाहता है तो मैंने अपना उत्तर बदल दिया। मुझे याद है कि मुझे एक गिरावट कहां मिली, क्योंकि ओपी "बेहतर" या "सही तरीका" समाधान नहीं चाहता था, लेकिन सटीक तरीके से मैंने लिखा था। हो सकता है कि बस कुछ ऐसा हो, जिसे मैं समझता या समझा नहीं था या यह ओपी पर निर्भर करता है?

— कागटै उलुबाय

Answer 5

मैंने देखा है कि अन्य उत्तर या तो उपयोग नहीं करते <label>(क्यों नहीं?), या मिलान forऔर idविशेषताओं की आवश्यकता है । इसका मतलब यह है कि अगर आपके पास क्लैशिंग आईडी है, तो आपका कोड काम नहीं करेगा, और आपको हर बार यूनिक आईडी बनाना याद रखना चाहिए।

इसके अलावा, यदि आप के inputसाथ display:noneया छिपाते हैं visibility:hidden, तो ब्राउज़र उस पर ध्यान केंद्रित नहीं करेगा।

एक चेकबॉक्स और उसका पाठ (या इस मामले में, छवि) को एक लेबल में लपेटा जा सकता है:

.fancy-checkbox-label > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: inherit;
}
.fancy-checkbox-label {
  font-weight: normal;
  cursor: pointer;
}
.fancy-checkbox:before {
  font-family: FontAwesome;
  content: "\f00c";
  background: #fff;
  color: transparent;
  border: 3px solid #ddd;
  border-radius: 3px;
  z-index: 1;
}
.fancy-checkbox-label:hover > .fancy-checkbox:before,
input:focus + .fancy-checkbox:before {
  border-color: #bdbdff;
}
.fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before {
  color: #eee;
}
input:checked + .fancy-checkbox:before {
  color: #fff;
  background: #bdbdff;
  border-color: #bdbdff;
}
.fancy-checkbox-img:before {
  position: absolute;
  margin: 3px;
  line-height: normal;
}
input:checked + .fancy-checkbox-img + img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #bdbdff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox"></span>
    A normal checkbox
  </label>
</p>
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox fancy-checkbox-img"></span>
    <img src="http://placehold.it/150x150">
  </label>
</p>

Answer 6

यहां एक चेकबॉक्स की तरह एक छवि का चयन करने का एक त्वरित उदाहरण है

Knockout.js का उपयोग करके अपडेट किया गया उदाहरण:

var imageModel = function() {
    this.chk = ko.observableArray();
};
ko.applyBindings(new imageModel());

    input[type=checkbox] {
        display:none;
      }
 
  input[type=checkbox] + label
   {
       display:inline-block;
        width:150px;
        height:150px;
        background:#FBDFDA;
        border:none;
   }
   
   input[type=checkbox]:checked + label
    {
        background:#CFCFCF;
        border:none;
        position:relative;
        width:100px;
        height:100px;
        padding: 20px;
    }

   input[type=checkbox]:checked + label:after
    {
        content: '\2713';
        position:absolute;
        top:-10px;
        right:-10px;
        border-radius: 10px;
        width: 25px;
        height: 25px;
        border-color: white;
        background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<input type='checkbox' name='image1' value='image1' id="image1" data-bind="checked: chk"/><label for="image1"></label><label for="image1"><img class='testbtn'/></label>

<div data-bind="html: chk"></div>

Comments

जबकि मैं आपके दृष्टिकोण को पसंद करता हूं, यह सबसे अधिक यह बताने में मददगार होगा कि आप अपने उदाहरण में नॉकआउट का उपयोग कर रहे हैं।

— कोन्नेक्सो

@connexo चीयर्स, नॉकआउट.जैस का उपयोग करके उदाहरण कहने के लिए अपडेट किया गया

— YaBCK

Answer 7

WordPress और GravityForms का उपयोग करने वाले किसी भी व्यक्ति के लिए स्वीकार किए गए उत्तर पर विस्तार करने के लिए अपने फॉर्म उत्पन्न करने और पोस्ट की सूची के साथ चेकबॉक्स फ़ील्ड को स्वचालित रूप से पॉप्युलेट करने की इच्छा और उनके साथ संबंधित फ़ीचर्ड थंबनेल।

// Change '2' to your form ID
add_filter( 'gform_pre_render_2', 'populate_checkbox' );
add_filter( 'gform_pre_validation_2', 'populate_checkbox' );
add_filter( 'gform_pre_submission_filter_2', 'populate_checkbox' );
add_filter( 'gform_admin_pre_render_2', 'populate_checkbox' );

function populate_checkbox( $form ) {

    foreach( $form['fields'] as &$field )  {

        // Change '41' to your checkbox field ID
        $field_id = 41;
        if ( $field->id != $field_id ) {
            continue;
        }

        // Adjust $args for your post type
        $args = array(
                'post_type' => 'pet',
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'tax_query' => array(
                        array(
                                'taxonomy' => 'pet_category',
                                'field' => 'slug',
                                'terms' => 'cat'
                        )
                )
        );

        $posts = get_posts( $args );

        $input_id = 1;

        foreach( $posts as $post ) {

            $feat_image_url = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
            $feat_image_url .= '<br />' . $post->post_title;

            if ( $input_id % 10 == 0 ) {
                $input_id++;
            }

            $choices[] = array( 'text' => $feat_image_url, 'value' => $post->post_title );
            $inputs[] = array( 'label' => $post->post_title, 'id' => "{$field_id}.{$input_id}" );

            $input_id++;
        }

        $field->choices = $choices;
        $field->inputs = $inputs;

    }

    return $form;
}

और सीएसएस:

.gform_wrapper .gfield_checkbox li[class^="gchoice_2_41_"] {
    display: inline-block;
}

.gform_wrapper .gfield_checkbox li input[type="checkbox"][id^="choice_2_41_"] {
    display: none;
}


.gform_wrapper .gfield_checkbox li label[id^="label_2_41_"] {
    border: 1px solid #fff;
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label[id^="label_2_41_"]:before {
    font-family: "font-icons";
    font-size: 32px;
    color: #1abc9c;
    content: " ";
    display: block;
    background-color: transparent;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label[id^="label_2_41_"] img {
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

:checked + label[id^="label_2_41_"] {
    border-color: #ddd;
}

/* FontAwesome tick */
:checked + label[id^="label_2_41_"]:before {
    content: "\e6c8";
    background-color: transparent;
    transform: scale(1);
}

:checked + label[id^="label_2_41_"] img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: 0;
}