Check the color of one out of 10 checkboxes | XM Community
Skip to main content
Solved

Check the color of one out of 10 checkboxes

  • August 6, 2020
  • 4 replies
  • 42 views
K

Hi everybody,
I have a matrix table with 10 statements from which the participant can choose 0, 1, 2, ..., or 10 with a simple multiple-choice checkbox. I achieved this by using the matrix table with matrix type "Likert" and Answers being "Multiple Answer".
For that, I want to highlight one of 10 checkboxes and changing the color of its border (from standard blue to green). I found a lot of information regarding CSS and how to change the color of all checkboxes in such items, but no approach to change the color of only one, specific checkbox in a specific question.
Can anyone help? Thanks a lot in advance!
Kim

Best answer by rondev

https://www.qualtrics.com/community/discussion/comment/28730#Comment_28730Here is the updated code:
jQuery(".Skin .c4 label.q-checkbox:eq(0) , .Skin .c4 label.q-checkbox.q-checked:eq(0)").css("border","2px solid #58f312");

    4 replies

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • August 6, 2020

    Use the below in the matrix javascript onReady function. This eill chasnge the border of checkboxes in first column. For any other column like for column 2 just change c4 to c5 and so on.
    jQuery(".Skin .c4 label.q-checkbox , .Skin .c4 label.q-checkbox.q-checked").css("border","2px solid #58f312");

    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
    K
    • Kim_Boehm
    • Author
    • August 6, 2020

    Dear Ron Dev,
    thanks a lot for you answer!
    I only have one column, so at the moment, this script changes the color of all checkboxes. What I want is to change the color of one checkbox, so checkbox 1 of column 1, but not checkbox 2, 3, 4, of column 1.
    Can I do that by (somehow) refer to this with your code differently?


    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • Answer
    • August 6, 2020

    https://www.qualtrics.com/community/discussion/comment/28730#Comment_28730Here is the updated code:
    jQuery(".Skin .c4 label.q-checkbox:eq(0) , .Skin .c4 label.q-checkbox.q-checked:eq(0)").css("border","2px solid #58f312");

    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
    K
    K
    • Kim_Boehm
    • Author
    • August 11, 2020

    Dear rondev ,
    thanks a lot for your work! The updated code works perfectly, changing the color of a specific checkbox in a specific colum.
    For other users: If you change the number behind "c" (now c4) you can change the column (c4=column 1, c4=column 2, and so). Likewise, you change the checkbox (or line the checkbox is line) that is marked by changing the number behind "eq" (now eq(0): eq(0)=checkbox in line 1, eq(1)=checkbox in line 2, and so).
    Cheers,
    Kim

    rondev
    Terms & ConditionsAccessibility statement