Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Gonçalo Assunção 39 posts 68 karma points
    Dec 23, 2014 @ 12:08
    Gonçalo Assunção
    0

    "Select All" checkboxes with xslt and jQuery

    Hello guys...

    I'm having some issues with a simple "select all" function in jQuery, with a xslt template:
    here's the template:
     <xsl:template name="userCategories">
        <xsl:param name="value"/>
        <xsl:param name="label"/>
        <!--<xsl:call-template name="selectAllCategories"/>-->
        <label>
          <xsl:attribute name="class">
            <xsl:text>labelCheck</xsl:text>
            <xsl:if test="count(umbraco.library:Split(umbraco.library:GetCurrentMember()/categories,',')[value = $value]) > 0">
              <xsl:text> c_on</xsl:text>
            </xsl:if>
          </xsl:attribute>
          <input type="checkbox" value="{$value}" name="_categories">
            <xsl:if test="count(umbraco.library:Split(umbraco.library:GetCurrentMember()/categories,',')[value = $value]) > 0">
              <xsl:attribute name="checked">checked</xsl:attribute>
            </xsl:if>
          </input>
          <xsl:value-of select="$label"/>
        </label>
      </xsl:template>

     

    Here's the call of that template:
    <div id="allInterests">
                  <label class="labelCheck" for="selectAll">
                      <input type="checkbox" id="selectAll"  />
                      <xsl:value-of select="$selectCategory"/>
                  </label>
              </div>
            <fieldset class="style1">

              <xsl:for-each select="umbraco.library:GetDictionaryItems('Categories')/DictionaryItems/DictionaryItem">
                <xsl:sort select="." order="ascending"/>
                <xsl:call-template name="userCategories">
                  <xsl:with-param name="value" select="@key"/>
                  <xsl:with-param name="label" select="."/>
                </xsl:call-template>
              </xsl:for-each>
            </fieldset>

     

    Now, my purpose is, when the user checks the "selectAll" checkbox, the other checkboxes turn to "checked", using jQuery.
    I've seen tons of examples for this in other forums, and through out the web. The best that kind of worked for me was:
      $("#selectAll").click(function () {
        $('input[name="_categories"]').prop('checked', !this.checked);
      });

    I don't know why, but it only works if I place the "!" inside the prop()... Otherwise it is reversed...
    Other issue is, when I refresh the page, all catagories are checked, eventhough the "selectAll" isn't..
    Another issue (yeah, I know..... ) is when I try check a single category (ex: category_1), category_1 stays unchecked, but all the other categories turn to checked...

    It's been a real pain in the.... Something so simple, giving such a hard time...
    Are these issues happening due to the use of xslt templates?

  • Jeffrey Schoemaker 408 posts 2138 karma points MVP 8x c-trib
    Dec 23, 2014 @ 15:56
    Jeffrey Schoemaker
    0

    Hi Gonçalo,

    Is it not just simply .prop('checked', true); to select them all?

    And furthermore I think you should check in the click function whether the #selectAll is checked or not.

    Maybe it's usefull to also post the generated HTML content.


    Greetings Jeffrey

Please Sign in or register to post replies

Write your reply to:

Draft