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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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