Форум

Mirtle@tut.by · #1 (**permalink**) 18.08.2015, 16:18

<html>
<head>
<body>
<div>
<h2>Таблица</h2>
<ul>
<li><input type = "checkbox"> кот </li>
<li><input type = "checkbox"> собака </li>
</ul>
<form>
<input type = "text">
<input type = "submit">
</form>
</div>
<script>
$("div").on("click", "input:submit", function(e) {

var result = $("input:text").val();
$("<li><input type = 'checkbox'>" + result + "</li>").appendTo('ul');

if("input:submit"){
$("input:text").val("");
}

$("input:checkbox").click(function(e) {

var check = $(this).prop("checked");
console.log(check);
if (check == true) {
$("input:checked").closest("li").css("text-decoration", "line-through");
}

else {
$(this).closest("li").css("text-decoration", "none"); // closest("li")-родитель checkbox

}

});
});

$("input:checkbox").click(function(e) {

var check = $(this).prop("checked");

if (check == true) {
$("input:checked").closest("li").css("text-decoration", "line-through");
}

else {
$(this).closest("li").css("text-decoration", "none");

}

}
);

$('form').on('submit', function(e) {
e.preventDefault();

});

</script>
</body>
</html>

Mirtle@tut.by · #2 (**permalink**) 18.08.2015, 18:31

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<style>
	li{list-style: none;
	
	}
	</style>
</head>
<body>
<div>
<h2>Таблица</h2>
<ul>
<li><input type = "checkbox"> кот </li>
<li><input type = "checkbox"> собака </li>
</ul>
<form>
<input type = "text">
<input type = "submit">
</form>
</div>


[js]
<script>
$("div").on("click", "input:submit", function(e) {


var result = $("input:text").val();
$("<li><input type = 'checkbox'>" + result + "</li>").appendTo('ul');

if("input:submit"){
$("input:text").val("");
}

*!*
$("input:checkbox").click(function(e) {

var check = $(this).prop("checked");
console.log(check);
if (check == true) {
$("input:checked").closest("li").css("text-decoration", "line-through");
} 

else {
$(this).closest("li").css("text-decoration", "none"); // closest("li")-родитель checkbox

}
*/!*
});
});

$("input:checkbox").click(function(e) {

var check = $(this).prop("checked");

if (check == true) {
$("input:checked").closest("li").css("text-decoration", "line-through");
} 

else {
$(this).closest("li").css("text-decoration", "none");

}

}
);

$('form').on('submit', function(e) {
e.preventDefault();

});

</script>
[/js]
</body>
</html>

Mirtle@tut.by · #3 (**permalink**) 18.08.2015, 18:39

Хотелось бы чтобы в программе выделенный код был один раз. Чтобы по нажатию на checkbox текст тоже выделялся не зависимо нажала я на div или нет. Пока у меня это сделано дублированием выделенного кода. Не знаю пока как это организовать. Я только учусь

.

рони · #4 (**permalink**) 18.08.2015, 18:57

Mirtle@tut.by,

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<style>
	li{list-style: none; background-color: #DEB887;border : 1px solid #FF0000; width: 200px;}
    label{
      display: block;
      width: 100%;
    }

	</style>
</head>
<body>
<div>
<h2>Таблица</h2>
<ul>
<li><label><input type = "checkbox"> кот </label></li>
<li><label><input type = "checkbox"> собака </label></li>
</ul>
<form>
<input type = "text">
<input type = "submit">
</form>
</div>



<script>
var inp = $("input:text");
$("div").on("click", "input:submit, input:checkbox", function(a) {
    $(this).is(":checkbox") ? $(this).parents("li").css("text-decoration", this.checked ? "line-through" : "none") :
    (a.preventDefault(), (a = $.trim(inp.val())) && $("<li><label><input type = 'checkbox'> " + a + " </label></li>").appendTo("ul"), inp.val(""))
});
</script>

</body>
</html>

Mirtle@tut.by · #5 (**permalink**) 18.08.2015, 22:28

Спасибо большое. Вот это он укоротился.

Форум

Справочник

Discord чат

Курсы javascript