Add Checkboxes as Display Type

See the 'views_bulk_operations' module.

(Re-open if your problem wasn't solved.)

At first glance it seems to me that to achieve what I want, I first need to create a view of the flags associated with the node and then with this 'views_bulk_operations' allow the flag to be activated with a checkbox. Is this it?

Yes. VBO would show you a dropdown of actions to apply to the checked items, among them "flag ..." and "unflag ...".

Do other people think a checkbox makes sense for flag?

This implementation would need to abstract out single and batch operations. VBO already has/uses a batch api, but it has issues supporting any object versus only nodes and users. Flag supports this. Another VBO limitation is its use of a views style to add the checkbox operator. Flag solves this by using fields to add operators to views.

I think it sounds potentially useful for bulk operations.

I think it sounds potentially useful for bulk operations.

hrm, got some kinda weird error there upon submission.. sorry for the double post.

mitchell wrote:

This implementation would need to abstract out single and batch operations.

What do you mean?

I once asked you to explain your thoughts on checkboxes, but you didn't.

slider_13 wrote:

http://drupal.org/files/issues/flags_checkbox.png
In the attachment I included an example of a kind of flags taken from www.shelfari.com
For these kind of flags I think that the traditional flag and unflag links just don't work.

Why do you think "the traditional flag and unflag links just [won't] work" to mimic what's in this screenshot? See theme/README.txt, or the handbook. It's possible to use images instead of text for these links.

I actually see a couple gaps in my statement after looking at slider_13's screenshot, because checkbox would be useful for two separate features. In his case, it seems that the checkboxes would serve the exact same function as the text links. I brought this up to quicksketch about the possibility of using the Icon module to replace text links with pre/post flag images. In this case, I think slider_13 simply wants an administrative option to select a checkbox instead of naming traditional flag and unflag links. One more thing to note about the screenshot; this implementation offers a list of independent flags (and not or).

The case I'm thinking about would apply the same flag to several items in a views output; the checkboxes wouldn't respond immediately, but rather collect a list of nodes and then apply them once another button, maybe in the header or footer, is pressed. The flag building page could allow users to set up an exposed list of actions to perform on the checked objects, in addition to setting up the 'flag/unflag' links and the 'perform flag operation on these items' links.

Some history of this idea after looking at the theming handbook:
#172291: Image links and effects
#166177: Show the Views Bookmarks link (mark/unmark) as an (mark/unmark) image
How to show images instead of text (CSS theming guide for flag)

I don't think I was on the right track in this issue. Moofie pointed out:

It's possible to use images instead of text for these links.

This could, however, be made easier with included display options.

We actually already have different display types (confirmation, JavaScript, plain). So the checkbox just needs to be another display type. However, we get into trouble in that checkboxes would not work without JavaScript (unlike all the other existing types). It's easy for a link to work without JavaScript, it just reloads the page. Checkboxes on the other hand are troublesome because you actually need a form to submit them without JavaScript.

A possibility is to use the standard links as usual, then use JavaScript to replace the links with checkboxes. I like the idea of using checkboxes, as their meaning is pretty clear without the use of descriptive text or images, plus they match the user's browser interface.

A different solution than adding this as a 'Display Type' is to do this in the Views integration: The "Flag Ops" field would have a "Display as checkbox" option. The view will be wrapped in a form, and we will also need an "Update" button.

A view is a natural setting for checkboxes because you probably want the data displayed in a tabular format.

Note that I'm no longer using Drupal, so I won't be able to help here.

bump

This is now provided by Flag Form.

Flag Form only works with node-based displays (understandably so, the way it works). The intentions I had for this issue were to create a checkbox that worked exactly like the normal links, only it was a checkbox instead. This way you could have a list of "Sessions" for example, that had a checkbox for "I'm attending". Checking the box would submit an ajax request just like the normal links do now.

Flag Form is definitely neat, but I don't think it's the same use-case as this issue.

subscribe. need checkboxes too.

-1 for this.

I followed these instractions http://drupal.org/node/305066. I am using two icons from one of the GPLed icon library one showing a "not checked checkbox" and other showing "checked checkbox." I made sure the http link included both icon and the link next to it so icon is clickable too.

So this is working perfectly and from usability point works like a checkbox.

So why add additional code when you can achive same thing with theming? The only issue I can see is the checkboxes may not match your browser's interface right of the box with above instractions. That also can be corrected with some conditions around css perhaps.

You can change your flag.tpl.php file in 45 line, like

<?php if ($link_href): ?>
    <a href="<?php print $link_href; ?>" title="<?php print $link_title; ?>" class="<?php print $flag_classes ?>" rel="nofollow"><input type="checkbox" <?php print $link_text; ?> ></a>

Now you need named field in http://site-name/?q=admin/build/flags/edit/flag-name

like

Flag link text: no-checked

And

Unflag link text: checked

And flush your cache.

Hah! Now that's very, very clever! I'm not sure if this would be safe/accessible across all browsers but it certainly is a straight-forward implementation.

Thanks. It works perfectly.
The same we can do this the image.
Just put

I recently had to implement a flag link as a checkbox in a D7 view. I opted to go the Javascript route. Below is my code. It appends a checkbox to each flag span, hides the anchor text, and simulates clicking on the links when the checkbox is clicked. The scoping will need to be changed but the logic should be the same:

/**
 * Behavior for altering the flag links
*/
Drupal.behaviors.alter_flag_links = {
  attach: function(context) {
    //Returns a checkbox dom object
    var cb_factory = function(class_attr, checked) {
      var checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.checked = checked;
      jQuery(checkbox).attr('class', class_attr);
      return checkbox;
    }
    //Convert each link to a form checkbox.
    jQuery('span.flag-name-here').each(function() {
      var flag_link = jQuery(this).children('a');
      if(flag_link.length == 0) {
        return;
      }
      flag_link.html(''); //Hide text
      var flag_classes = flag_link.attr('class');
      var checked = false;
      var class_attr = 'compare-cb';
      if(flag_classes.match(/unflag-action/)) {
        checked = true;
      }
      //Only Add form element if it doesn't exist
      if(jQuery(this).children('input').length == 0) {
        var elem = cb_factory(class_attr, checked); 
        jQuery(this).prepend(elem);
      }
    });
    //Attach an event listener to each of the new checkboxes
    jQuery('input.compare-cb').each(function() {
      jQuery(this).click(function() {
        jQuery(this).parent().children('a').click();
      });
    });
  }
}

subscribe

subscribe

+1 to ngmaloney

ngmaloney, where does that code reside?

Thanks.

@mstrom81 you can add it to either your theme or a custom module. Ex: Save it to your theme folder as sites/all/themes/mytheme/js/alter_flag_links.js and in mytheme.info add the following line.

scripts[] = js/alter_flag_links.js

@ngmaloney Thank you for sharing this code. I really need to have flags as check boxes in views, D7.

Upping the version. This is a low priority though as far as I'm concerned (as in, please submit patches!). I'd also be quite happy for it to live in a separate module.

Another quick and dirty solution is to use the following characters in the link text fields:

☐ and ☑

Some CSS might be necessary to account for size and font variation, but it's working great for me!

Here's improved and shortened version of the code snippet from #28:

Drupal.behaviors.alter_flag_links = {
  attach: function(context) {
    $('span.your_flag_class').each(function() {
      var flag_link = $(this).children('a');
      if (flag_link.length) {
        flag_link.hide();
        var class_attr = 'flag-cb';
        var checked = (flag_link.hasClass('unflag-action')) ? true : false;
        if (!$(this).children('input').length) {
          var checkbox = $('<input type="checkbox" />').attr({'checked': checked, 'class': class_attr});
          $(this).prepend(checkbox);
        }
      }
    });

    $('input.flag-cb').click(function() {
      $(this).siblings('a').click();
    });
  }
};

thanks drone for your #36 code.

the original flag text/label is gone though, but adding $(this).append(flag_link.text()); below $(this).prepend(checkbox); would do the job.

It would be great if instead of pasting snippets, someone took this and made a patch, so I can commit it to the module and everyone benefits.

Rather than JS alteration though, it should be a new link type.

I would say, in addition to "pasting snippets".

At least there's something here to get people going...

But I do agree, a patch with a new display style would be the BEST!

Thanks everyone for all the input!

Snippets just encourage everyone to hack their modules.

If you are going to post a snippet, please take a few minutes to read the docs on how to make a patch.

If I need to change two or more flags (your_flag_class) to checkboxes - what syntax will be? Thanks.

Just a quick reminder: if you don't have jQuery NoConflict running, your browser will not recognize the $, so be sure to wrap it in a function as so:

(function ($) {

code from #36 here, remember to replace span.your_flag_class to yours

}(jQuery));

@TommyK
Love your idea! (using ☐ and ☑ in the link text fields)

#36 is the right idea, but only works when flag Link type: is set to JavaScript toggle. The approach in #36 will completely break your flag if you use "Normal link" or "Confirmation form" as the link type. My use-case requires confirmation form.

I would love to submit a patch that adds a proper working "Single On/Off checkbox" as a flag link type—I would love it even more if someone else were to submit one ;)

On a flag's edit page (e.g., admin/structure/flags/manage/node_flag), the "Display checkbox on entity edit form" option sounds to me as though it specifies the use of checkboxes instead of links. But when I enable it, it does not seem to change anything. Am I misinterpreting the purpose of that option?

> Display checkbox on entity edit form

It says that it puts a checkbox on the *edit form*. Not on the entity display.

Script in #36 doesn't work anymore with the new 7.x-3.5 version. any fix for this?
EDIT: sorry that was because I have enabled nice messages module and it was the cause of this.

Sorry to beat a dead horse but if we do not have the ability to do this cleanly from the UI why do we not just do it within css and add a background checkbox to the a record?

Unfortunately, I'm not here to provide a patch, but rather, a Drupal 8 version of this:

(function ($, window, Drupal) {

  'use strict';
  
  Drupal.behaviors.mbga_achievement_unlocked_flag_checkbox = {
    attach: function() {
      $('a.flag-mbga_achievement_unlocked').each(function() {
        var class_attr = 'flag-mbga_achievement_unlocked-checkbox well';
        var checked = ($(this).hasClass('action-unflag')) ? true : false;

        if (!$(this).children('input').length) {
          var checkbox = $('<input type="checkbox" />').attr({'checked': checked, 'class': class_attr, 'style': 'margin-right: 5px;'});
          $(this).prepend(checkbox);
        }
    });

      $('input.flag-mbga_achievement_unlocked-checkbox').click(function() {
        $(this).siblings('a').click();
      });
    }
  };

})(jQuery, window, Drupal);

which creates the attached before/after display.

Might as well bump this up to 8.x.

Updated to the latest dev release:

(function ($, window, Drupal) {

  'use strict';
  
  Drupal.behaviors.mbga_achievement_unlocked_flag_checkbox = {
    attach: function() {
      $('.flag-mbga_achievement_unlocked').each(function() {
        var link = $(this).children('a');
        if (link.length) {
          var class_attr = 'flag-mbga_achievement_unlocked-checkbox';
          var checked = ($(this).hasClass('action-unflag')) ? true : false;

          if (!$(this).children('input').length) {
            var checkbox = $('<input type="checkbox" />').attr({'checked': checked, 'class': class_attr, 'style': 'margin-right: 5px'});
            $(this).prepend(checkbox);
          }
        }
    });

      $('input.flag-mbga_achievement_unlocked-checkbox').click(function() {
        $(this).siblings('a').click();
      });
    }
  };

})(jQuery, window, Drupal);

For anyone still looking for a 7.x-3.x solution, please take a look at #2918788: Add an ajax "Checkbox" Flag Link Type. We needed this feature on RiffTrax.com — so I followed @joachim's advice and created a new Flag Link type. Testing and feedback is appreciated.

@torgosPizza: Awesome stuff, thanks. It works/looks exactly the way the above JS works under the D8 version. Great! (Incidentally: huge fan of RiffTrax, and not just cos you use my achievements.module ;)

7 years without any activity. I think we can close it as outdated. Please reopen if needed.

This is still a desirable feature.

In 2025 this simple task could be resolved with CSS only.

My flag machine name is "test_flag"

CSS code

.flag-test-flag {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.flag-test-flag a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  background-color: #f8fafc;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none !important;
  color: #1e293b !important;
}

.flag-test-flag.action-flag a:hover {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.flag-test-flag.action-unflag a {
  border-color: #10b981;
  background-color: #dcfce7;
}

.flag-test-flag.action-unflag a:hover {
  border-color: #059669;
  background-color: #d1fae8;
}

.flag-test-flag a::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.2s ease;
}

.flag-test-flag.action-unflag a::before {
  background-color: #10b981;
  border-color: #10b981;
  box-shadow: inset 0 0 0 3px #fff;
}

.flag-test-flag.action-unflag a span {
  color: #166537;
}