问题描述:

This is my code:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery Checkbox and Radio Button Styling</title>

<style type="text/css">

/*

* customRadioCheck: jQuery plugin for checkbox and radio replacement

* Usage: $('input[type=checkbox], input[type=radio]').customRadioCheck();

* Author: Cedric Ruiz

* License: MIT

*/

.custom-label {

display: inline-block;

margin-right: .8em;

cursor: pointer;

}

.custom-radio,

.custom-check {

vertical-align: middle;

display: inline-block;

position: relative;

top: -.15em; /* Adjust to for best fit */

margin: 0 .4em;

width: 20px;

height: 20px;

background: url(img/customRadioCheck.png) 0 0 no-repeat;

}

.custom-radio { background-position: 0 -20px; }

.custom-check.focus { background-position: -20px 0; }

.custom-radio.focus { background-position: -20px -20px; }

.custom-check.checked { background-position: -40px 0; }

.custom-radio.checked { background-position: -40px -20px; }

.custom-check.checked.focus { background-position: -60px 0; }

.custom-radio.checked.focus { background-position: -60px -20px; }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

/*

* customRadioCheck: jQuery plguin for checkbox and radio replacement

* Usage: $('input[type=checkbox], input[type=radio]').customRadioCheck();

* Author: Cedric Ruiz

* License: MIT

*/

;(function(){

$.fn.customRadioCheck = function() {

return this.each(function() {

var $this = $(this);

var $span = $('<span/>');

$span.addClass('custom-'+ ($this.is(':checkbox') ? 'check' : 'radio'));

$this.is(':checked') && $span.addClass('checked'); // init

$span.insertAfter($this);

$this.parent('label').addClass('custom-label')

.attr('onclick', ''); // Fix clicking label in iOS

// hide by shifting left

$this.css({ position: 'absolute', left: '-9999px' });

// Events

$this.on({

change: function() {

if ($this.is(':radio')) {

$this.parent().siblings('label')

.find('.custom-radio').removeClass('checked');

}

$span.toggleClass('checked', $this.is(':checked'));

},

focus: function() { $span.addClass('focus'); },

blur: function() { $span.removeClass('focus'); }

});

});

};

}());

</script>

</head>

<body>

<a href='http://1stwebmagazine.com/jquery-checkbox-and-radio-button-styling'><img src='../img/logo.png' alt='1stWebMagazine' /></a>

<h1>jQuery Checkbox and Radio Button Styling</h1>

<div>

<h3>Checkbox:</h3>

<label><input type="checkbox"/>sfdf</label><br/>

<label><input type="checkbox"/>Lamb</label><br/>

<label><input type="checkbox"/>Tiger</label><br/>

</div>

<div>

<h3>Radio button:</h3>

<label><input type="radio" name="n"/>Green</label><br/>

<label><input type="radio" name="n"/>Blue</label><br/>

<label><input type="radio" name="n"/>Orange</label><br/>

</div>

<script type="text/javascript">

$('input[type=checkbox], input[type=radio]').customRadioCheck();

</script>

</body>

</html>

In the above code I have used customised css checkboxes, but in my jsp I cannot use the tag

<!doctype html>

So, is there any alternative to <!doctype html> ,as the above code does not work without it

网友答案:

You can still declare HTML5 doctype from JSP:

<![CDATA[<!DOCTYPE html>]]>
网友答案:

here is no way to get doctype like html object. you can do this

document.write("<!doctype HTML>\n" + document.head.outerHTML + document.body.outerHTML);

use new doctype and replace full html source.

网友答案:

I would create 3 pages, a HTML, CSS and JSP and link them all together.

网友答案:

Try with this

<!DOCTYPE html SYSTEM "about:legacy-compat">

for details : http://www.totalvalidator.com/support/doctypes.html

相关阅读:
Top