Selecting checkbox that is hidden under button

Question

I need to select checkbox, but click function fails.

I have button in my webpage:

<button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" aria-haspopup="true" style="">
spans...
</button>

And we have checkbox:

<ul class="classa123 classb123" style="">
<li class=" ">
<label class="classoflabel" title="" for="checkbox-123">
<input type="checkbox" title="Select This" value="1" name="multiselect-box-type" id="checkbox123">
<span>Select This</span>
</label></li>
    ...

How I can select this checkbox? With find_element_by_id("checkbox123").is_selected() I found that checkbox is not selected, but when I try .click() it fails. I think maybe I should first open the checkbox by clicking the button, but the button doesn't have a unique id or class. I'm using selenium webdriver with python. You can write code in other languages too if you know how to solve this problem. Thanks...

Your question is ultra confusing. Can you make a [**jsFiddle**](http://jsfiddle.net/) of your problem, or rewrite the question and walk us through, step by step, what you're doing and what you expect? — SpYk3HH, Nov 27 '13 at 14:04
@SpYk3HH yes, but this code is for finding this checkbox and test if its selected or not. — Emin Mastizada, Nov 27 '13 at 14:05
@SpYk3HH i'm trying to select "Select This" input. I tried to use .click after finding if this input is selected or not, but after finding box, click function returns error. — Emin Mastizada, Nov 27 '13 at 14:07
You're still not making sense. I tried an answer, but it would really help if you'd rewrite the question. — SpYk3HH, Nov 27 '13 at 14:11
What is the error that is returned when you try to `.click()` on the checkbox? — Mark Rowlands, Jan 08 '14 at 16:31

score 1 · Accepted Answer · edited May 23 '17 at 11:49

OK, I think I get what you need. First of all, if you're using jQuery, you can use any CSS selector as your selector to get your element. For instance, to get an input with the id of checkbox123, you would simply:

$('#checkbox123')

However, if you wanted a collection of input checkboxes within a ul, then you could select like:

$('ul input[type=checkbox]')

Finally, determine whether or not it's checked is extremely simple.

var checked = $('#checkbox123').is(':checked');
//  see your result in developer console with 
console.log(checked); // will be `true` or `false`

If you're trying to get the span (with text Select This) after, on a button click, you might try something like:

$('button').click(function(e) {
    $('ul input[type=checkbox]:checked').each(function(i) {
        var span = $(this).next('span');
        alert(span.text())
    });
})

Last call, if you need to change the state of a checkbox, use .prop on checked with a boolean value. Such as:

$('#checkbox123').prop('checked', true); // will make it checked
$('#checkbox123').prop('checked', false); // will uncheck it

I believe this may have been updated since I last answered question, so I'll update answer here to show what's obviously missing.

Finally, using jQuery to fire an event, such as click is extremely simple. There are also a couple ways to do such, some basically the same thing.

The easiest is to use .click(). It's as simple as:

$('#checkbox123').click();

Next use is .trigger(). Basically same thing as .click. Really this is just about personal use in readability.

$('#checkbox123').trigger('click');

Keep in mind, if you're using this, and it's not working. Something maybe wrong with your selector. One way to know for sure is to console log it. If you don't see a jQuery OBject Element printed to console containing the element you expect, then you know your selector isn't working. Keep in mind, this will show a jQuery Object regardless, but it will not have an HTML element in it.

console.log($('#checkbox123').trigger('click'));

If exist, will look something like:

[input#checkbox123, context: document, selector: "#content", jquery: "1.9.......and so on for rest of object

If not exist, will look something like:

[context: document, selector: "#checkbox123", jquery: "1.9.......and so on for rest of object

I have no problem with checking checkbox is selected or not, the only problem is click, i need to select this checkbox. — Emin Mastizada, Nov 27 '13 at 14:13

cooper667 · Answer 2 · 2013-11-27T14:16:46.110

0

Try firing the click event like this:

   var element = $('#checkbox123')[0];
   if (document.createEvent) { 
      var e = document.createEvent("MouseEvents");
      e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      element.dispatchEvent(e);
  }

edited Nov 27 '13 at 14:16

answered Nov 27 '13 at 14:08

cooper667

427
4
7

is_selected works good, i need to select this checkbox. i used click but its not working – Emin Mastizada Nov 27 '13 at 14:14
He says the click() isn't firing....this works for select boxes so maybe it'll work here... – cooper667 Nov 27 '13 at 14:21

Selecting checkbox that is hidden under button

2 Answers2