checkbox : onclick not 'checking' the box

Question

I was trying to make style for checkbox,radio button and select box.
I got a plugin from ryanfait [ http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ ] and works well if we code HTML as he mentioned.

Now, my issue is something different. The HTML code will look like this.

<label class="checkBox">
    <input type="checkbox" id="rememberMember" class="styled"/>
    Remember me
</label>

OR

<input type="checkbox" id="rememberMember" class="styled"/>
<label class="checkBox" for="rememberMember">Remember me</label>

On clicking on the checkbox - it is not showing the tick mark.
On clicking on the 'Remember me' text - It is showing the tick mark.

I think the issue is with label.

Is there any possible way (editing the JS file) ? JS file : http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js

I put in JSfiddle but it is not loading the image !!
http://jsfiddle.net/smilyface/pXETM/1/

edited for closing input tags.

smilyface
– smilyface

2014-02-24 09:10:24 +00:00
Commented Feb 24, 2014 at 9:10 — smilyface
– smilyface, Commented Feb 24, 2014 at 9:10

Rohan Kumar · Accepted Answer · 2014-02-24 09:28:51Z

1

Download js and css from Styled checkbox and radios

Working Demo

Full Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/form.css" />
  <script src="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js"></script>
</head>
<body>
  <input type="checkbox" id="rememberMember" class="vAlignMiddle styled" name="remember_member_id" />
<span class="checkBoxLabel">Remember me</span>
  <br/>
  <label>
    <input type="radio" class="styled" name="radio"/> Yes
</label>
<br/>
<label for="radio_no"> 
<input type="radio" class="styled" name="radio" id="radio_no">
No</label>
</body>
</html>

Demo

edited Feb 24, 2014 at 9:28

answered Feb 24, 2014 at 9:14

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DeepakJ · Accepted Answer · 2014-02-24 09:12:12Z

0

It may be conflict in js file, You can find the jquery error in console of the web browser. To solve this error you need to identify the solution of that console error.

answered Feb 24, 2014 at 9:12

DeepakJ

3884 silver badges14 bronze badges

2 Comments

smilyface Over a year ago

No. I couldnt see any error in console. I am using firebug.

DeepakJ Over a year ago

I suggest you to use google chrome rather than firebug, Google chrome is more helpful to find issues regarding js conflict.

martynas · Accepted Answer · 2014-02-24 09:27:49Z

0

A potential solution would be to assign your input field an identifier and apply

$( "#myObj" ).click(function() {
    // This is what gets executed onClick
    $( "#myCheckbox" ).prop("checked", true);
});

edited Feb 24, 2014 at 9:27

answered Feb 24, 2014 at 9:09

martynas

12.3k3 gold badges59 silver badges61 bronze badges

2 Comments

smilyface Over a year ago

Where I need to add this in the custom-form-elements.js ?

martynas Over a year ago

Inside of some event. Tailor the selector to your implementation.

chriz · Accepted Answer · 2014-02-24 09:29:54Z

0

try this code. this will check your checkbox in onclick of label with class 'checkbox'

<script>
    $('.checkBox').click(function() {
      $("#rememberMember").prop("checked", true);
    });
</script>

edited Feb 24, 2014 at 9:29

answered Feb 24, 2014 at 9:21

chriz

1,3453 gold badges16 silver badges33 bronze badges

Collectives™ on Stack Overflow

checkbox : onclick not 'checking' the box

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related