1

https://jsfiddle.net/zcyykhow/

Должен выделяться только один checkbox .

Что не так я сделал?

$(".lines").click(function() {
  if ($(this).find(".ch").is(":checked")) {
    $(".ch").removeAttr("checked");
  } else {
    $(".ch").attr("checked", "checked");
  }
});
.lines {
  width: 100%;
  padding: 10px 0 10px 0;
  background-color: #FFFFFF;
  overflow: hidden;
  font-weight: 500;
  font-size: 17px;
}
.lines:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}
.tab1_unvisible {
  float: left;
  width: 10%;
  padding: 8px 0 8px 0;
  text-align: center;
}
.tab2 {
  float: left;
  width: 64%;
  padding: 8px 2% 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab3 {
  float: left;
  width: 9%;
  padding: 8px 0 8px 0;
}
.tab4 {
  float: left;
  width: 15%;
  padding: 8px 0 8px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class="lines">
  <div class="tab1_unvisible">
    <input class="ch" type="checkbox">
  </div>
  <div class="tab2">Tesla Model S (2015)</div>
  <div class="tab3">11</div>
  <div class="tab4">$120 000</div>
</div>
<div class="lines">
  <div class="tab1_unvisible">
    <input class="ch" type="checkbox">
  </div>
  <div class="tab2">Tesla Model S (2015)</div>
  <div class="tab3">11</div>
  <div class="tab4">$120 000</div>
</div>

3
  • весь необходимый код должен быть непосредственно в вопросе. Ссылки могут быть дополнением
    – Grundy
    21 июл 2016 в 9:16
  • @Grundy, поправил
    – emtecif
    21 июл 2016 в 9:21
  • Я хоть и не знаю очень хорошо JS, но естественно работать тут ничего не будет как вы хотите. Вы ведь все обозначили одним классом, а JS, не может определить какой из двух нужно помечать чекбоксом. В этом случае JS, работает правильно.
    – Insider
    21 июл 2016 в 9:38

2 ответа 2

2

Для вашей задачи JS Не нужен

  jQuery('.lines').on('click', function() {
      var checkbox = jQuery('.ch', jQuery(this));
    checkbox.prop("checked", !checkbox.is(':checked'));
    jQuery(this).toggleClass('checked', checkbox.is(':checked'))
  })
.lines {
  display: block;
padding: 10px 0 10px 0;
	background-color: #FFFFFF;
	overflow: hidden;
	font-weight: 500;
	font-size: 17px;
}

.lines:hover{
	background-color: #F5F5F5;
	cursor: pointer;
}

.tab1_unvisible{
	float: left;
	width: 10%;
	padding: 8px 0 8px 0;
	text-align: center;
}

.tab2{
	float: left;
	width: 64%;
	padding: 8px 2% 8px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tab3{
	float: left;
	width: 9%;
	padding: 8px 0 8px 0;
}

.tab4{
	float: left;
	width: 15%;
	padding: 8px 0 8px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lines">
			<div class="tab1_unvisible"><input class="ch" type="checkbox"></div>
			<div class="tab2">Tesla Model S (2015)</div>
			<div class="tab3">11</div>
			<div class="tab4">$120 000</div>
		</div>
<div class="lines">
			<div class="tab1_unvisible"><input class="ch" type="checkbox"></div>
			<div class="tab2">Tesla Model S (2015)</div>
			<div class="tab3">11</div>
			<div class="tab4">$120 000</div>
		</div>
<div class="lines">
			<div class="tab1_unvisible"><input class="ch" type="checkbox"></div>
			<div class="tab2">Tesla Model S (2015)</div>
			<div class="tab3">11</div>
			<div class="tab4">$120 000</div>
		</div>

3
  • у ТС 2 чекбокса, которые выбираются одновременно.
    – Denis
    21 июл 2016 в 9:24
  • спасибо большое, но мне нужно именно с js, так как у меня чекбоксы будут скрыты, вместо их будет появляться картинка 16*16 зеленая галочка)
    – emtecif
    21 июл 2016 в 9:28
  • 1
    скрипт работает, но вам нужно для картинки с галочкой еще класс для блока например менять.... 21 июл 2016 в 9:41
1

вместо remove попробуйте пременить prop:

$(".lines").click(function(){
    if($(".ch").is(":checked")){
    $(".ch").trigger("change").prop("checked", false);
  }else{
    $(".ch").trigger("change").prop("checked", true);
  }     
});
3
  • так не работает
    – emtecif
    21 июл 2016 в 9:31
  • 1
    $(".ch") - по прежнему выбирает все элементы с классом на странице, поэтому все так же применится к обоим элементам
    – Grundy
    21 июл 2016 в 9:45
  • @Grundy думал что есть только один инпут.. тогда так: jsfiddle.net/dLg7cfgy
    – C.Raf.T
    21 июл 2016 в 9:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.