Скрипт для печати выбранного checkbox

lukas1984 · June 10, 2015

Нужен скрипт, который позволит печатать определенный текст.
Использовать отдельные таблицы стилей не подходит, т.к в форме, которую печатаем, есть checkbox.
Я хочу передавать в печать только те checkbox, которые были выбраны, а так же выбранные option value

Может есть уже готовые скрипты, которые печатают определенный текст?
Буду признательна за ссылки, которые смогут помочь.

afdw · June 10, 2015

http://jsfiddle.net/ur51Luh8/

lukas1984 · June 10, 2015

http://jsfiddle.net/ur51Luh8/

А можно подробнее для начинающего чайника ?

afdw · June 10, 2015

http://jsfiddle.net/ur51Luh8/

А можно подробнее для начинающего чайника ?

HTML:

<iframe id="myIframe" style="display: none"></iframe>

JS:

window.onload = function(){    function PrintText(text)    {        Popup(text);    }    function Popup(data)     {        var iframe = document.getElementById('myIframe');        iframeDoc = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;        iframeDoc.document.write('<html><head><title>my div</title>');        iframeDoc.document.write('</head><body >');        iframeDoc.document.write(data);        iframeDoc.document.write('</body></html>');        iframeDoc.print();        return true;    }};

Далее просто вызываете PrintText, передавая ему ваш HTML код.

lukas1984 · June 11, 2015

http://jsfiddle.net/ur51Luh8/

А можно подробнее для начинающего чайника ?

HTML:

<iframe id="myIframe" style="display: none"></iframe>

JS:

window.onload = function(){    function PrintText(text)    {        Popup(text);    }    function Popup(data)     {        var iframe = document.getElementById('myIframe');        iframeDoc = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;        iframeDoc.document.write('<html><head><title>my div</title>');        iframeDoc.document.write('</head><body >');        iframeDoc.document.write(data);        iframeDoc.document.write('</body></html>');        iframeDoc.print();        return true;    }};

Далее просто вызываете PrintText, передавая ему ваш HTML код.

Вот такой я документ пытаюсь создать в html, но для печати мне надо ,что бы выводились на печать только выбранные данные.

JS мне надо вставить, как внешний скрипт ?

<html>

<body>

<tr>

</td>

</tr>

<tr>

<h>Разрешается <select name="menu" size="1">

<option selected="first">на поверхности</option>

<option value="selected" value="second">ранний выезд</option>

<option value="third">поздний спуск</option>

<option value="fourth">Четвертая позиция</option>

</select>

</form>

var d = new Date();

var month=new Array("января","февраля","марта","апреля","мая","июня",

"июля","августа","сентября","октября","ноября","декабря");

document.write(+" " +d.getDate()+ " " + month[d.getMonth()]

+ " " + d.getFullYear() + " г.");

//--></script> в <select name="menu" size="1">

</select>

</form> смену <select name="menu" size="1">

</select>

</form>

</h>

</td>

</tr>

617 </a><input type="checkbox" name="transport" value="airplane" /> Самолет<br />

718 <input type="checkbox" name="transport" value="train" /> Поезд<br />

816 <input type="checkbox" name="transport" value="car" /> Автомобиль<br />

985 <input type="checkbox" name="transport" value="bus" /> Автобус<br />

1023<input type="checkbox" name="transport" value="airplane" /> Самолет<br />

1156<input type="checkbox" name="transport" value="train" /> Поезд<br />

1256<input type="checkbox" name="transport" value="car" /> Автомобиль<br />

1458<input type="checkbox" name="transport" value="bus" /> Автобус<br /> </form>

</td>

<input type="checkbox" name="transport" value="airplane" /> Самолет<br />

<input type="checkbox" name="transport" value="train" /> Поезд<br />

<input type="checkbox" name="transport" value="car" /> Автомобиль<br />

<input type="checkbox" name="transport" value="bus" /> Автобус<br />

<input type="checkbox" name="transport" value="airplane" /> Самолет<br />

<input type="checkbox" name="transport" value="train" /> Поезд<br />

<input type="checkbox" name="transport" value="car" /> Автомобиль<br />

<input type="checkbox" name="transport" value="bus" /> Автобус<br />

</form>

Здесь идет содержание</td>

</tr>

<FORM>

<!-- Begin

function varitext(text){

text=document

print(text)

}

// End -->

</SCRIPT>

</FORM>

</body>

</html>

afdw · June 11, 2015

Не понял... А зачем тогда тут JS? Просто скройте в @media print то, что не нужно печатать.

lukas1984 · June 12, 2015

Не понял... А зачем тогда тут JS? Просто скройте в @media print то, что не нужно печатать.

но ведь @media позволяет лишь менять стиль документа или скрывать что-то...

@media это хорошо, но я не пойму, как с помощью этой функции сделать, так что бы на печать выводились лишь выбранные пользователем checkbox... или может есть у @media команда определённая для этого ?

sigma77 · June 12, 2015

1) input:checked / input:not(checked), если чисто чекбоксы нужно отобрать. Можно комбинировать с селектором "+" или "~"

2) добавлять класс .checked обертке и уже её показывать в print стилях

lukas1984 · June 13, 2015

2) добавлять класс .checked обертке и уже её показывать в print стилях

Об этом я читал уже, но не получается правильно прописать код.. Застопорился на checkbox и select, неделю мучаюсь...

afdw · June 14, 2015

ОК, вот пример стилей:

@media print {  input[type=checkbox]:not(:checked) {    display: none;  }}

lukas1984 · June 14, 2015

1.У меня получилось, что бы на печать показывались только выбранные checkbox, но при этом показываются остальные name всех checkbox. Как это устранить ?

2.И при выводе на печать мне надо, что бы checkbox с галочкой не был виден, только лишь выбранный текст. Как быть с этим ?

<head>

<title>checked</title>

<style>

@media screen {

input[type=checkbox]:not(:checked) {

}

@media print {

input[type=checkbox]:not(:checked) {

display: none;

}

</style>

</head>

<body>

<tr>

</td>

</tr>

<tr>

<h>Разрешается <select name="menu" size="1">

<option selected="first">на поверхности</option>

<option value="selected" value="second">ранний выезд</option>

<option value="third">поздний спуск</option>

<option value="fourth">Четвертая позиция</option>

</select>

</form>

var d = new Date();

var month=new Array("января","февраля","марта","апреля","мая","июня",

"июля","августа","сентября","октября","ноября","декабря");

document.write(+" " +d.getDate()+ " " + month[d.getMonth()]

+ " " + d.getFullYear() + " г.");

//--></script> в <select name="menu" size="1">

</select>

</form> смену <select name="menu" size="1">

</select>

</form>

</h>

</td>

</tr>

617 </a><input type="checkbox" name="transport" value="airplane" /> Иванов<br />

718 <input type="checkbox" name="transport" value="train" /> Петров<br />

816 <input type="checkbox" name="transport" value="car" /> Сидоров<br />

1718 <input type="checkbox" name="transport" value="train" /> Петров<br />

1816 <input type="checkbox" name="transport" value="car" /> Сидоров<br />

2718 <input type="checkbox" name="transport" value="train" /> Петров<br />

2816 <input type="checkbox" name="transport" value="car" /> Сидоров<br />

3816 <input type="checkbox" name="transport" value="car" /> Сидоров<br /> </form>