li标签jquery中使用的复选框答案

【问题标题】：checkbox used in li tag jqueryli标签jquery中使用的复选框
【发布时间】：2018-01-10 09:00:15
【问题描述】：

我想单击一个列表项并选中该列表项中的所有复选框，如果单击另一个列表项则取消选中 - 充当无线电系统。我怎样才能做到这一点？这是我当前的代码：

jQuery(function($) {

});

.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}

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

<ul>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
</ul>

【问题讨论】：

为什么不直接使用radio 输入...？然后你会默认得到这种行为。此外，您似乎没有尝试自己解决此问题，因此这只是“为我编写代码”请求
@RoryMcCrossan 我认为 OP 希望在单击它时选中 li 中的所有复选框，同时取消选择其他 li 元素中的所有其他复选框。如果使用单选按钮，一次只能激活一个
那么，您想确保在li 中任何时候都只选中一个复选框？如果这是您的要求，请重新措辞您的第一段。
我想在点击 li 时选中 li 中的所有复选框，所有复选框都被选中，但我点击其他 li 然后 prevision li 复选框未选中，并且已选中所有复选框。
我认为 OP 想要实现的是在 li 元素或其中的任何复选框被单击/激活时立即激活“分组”在 li 元素中的复选框。以这种方式“激活”另一个组将禁用其他组中的所有复选框。我对这个问题的解释是否正确，@traini-qula？

标签： javascript jquery html css checkbox

【解决方案1】：

基本思想是您监听 li 元素的点击，并在点击时选中其中的每个复选框，并取消选中所有不在 li 元素中的复选框。下面的示例代码

$(function() {
  var $li = $('li.checkall');
  var $checkboxes = $li.find('input[type="checkbox"]');
  $('li.checkall').click(function(e) {
    if (e.target !== this) return;
    var $this = $(this);
    $checkboxes.prop('checked', false);
    $this.find('input[type="checkbox"]').prop('checked', true);
  })
})

.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}

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

<ul>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
</ul>

【讨论】：

【解决方案2】：

你的意思是这样的吗？

jQuery(function($) {
 $("li").click(function(e){ 
  if (e.target !== this) return;
  $("li input").prop('checked', false);
  $(this).find("input").prop('checked', true);
 })
});

.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}

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

<ul>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
</ul>

【讨论】：

【解决方案3】：

你可以这样试试。

jQuery(function($) {
    $('li.checkall').on('click', function() {
        $('.check_one').prop('checked', false);
        $(this).find('.check_one').each(function() {
              $(this).prop('checked', true);
        });

    });
});

.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}

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

<ul>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
</ul>

【讨论】：

【解决方案4】：

简短易懂:)

  $('input[type=checkbox]').on('click',function(event){
        $('input').prop('checked', false);
        $(event.target).parent().children().prop('checked', true);
    })

【讨论】：

【解决方案5】：

试试这个。正是你的情况：

<ul>
        <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
        <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
        <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
      <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
    </ul>

Javascript：

 $('.checkall').click(function() {
    $('.checkall').find('.check_one').prop('checked', false);
    $(this).find('.check_one').prop('checked', true);
 });

【讨论】：

【解决方案6】：

jQuery(function($) {
  $("li").click(function() {
    $("li").each(function(index, item) {
      $(item).css({
        backgroundColor: "gray"
      });
    });

    
    $(this).css({
      backgroundColor: "red"
    });

    $(".check_one").each(function(index, item) {
      $(item).prop('checked', false);
    })

    $(this).find(".check_one").each(function(index, item) {
      $(item).prop('checked', true);
    });
  });
});

.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}

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

<ul>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
  <li class="btn checkall">
    <input type="checkbox" name="offer[key1]" class="check_one">
    <input type="checkbox" name="offer[key2]" class="check_one">
    <input type="checkbox" name="offer[key3]" class="check_one">
    <input type="checkbox" name="offer[key4]" class="check_one">
  </li>
</ul>

编辑

在活动 LI 上添加了 backgroundColor: "red"

【讨论】：

感谢朋友们的工作....但是如果我也想改变背景颜色。例如我点击 li 然后红色添加到 li 与 checbox 相同。
点击其他 li 然后 prevsion li red 被移除并检查 li 被红色覆盖

【解决方案7】：

jQuery(function($){

 
 $(document).on('click','li',function(){
  //console.log($(this).find('.check_one'));
  $('.check_one').prop('checked',false)
  $(this).children('.check_one').prop('checked',true);
 });

});

.btn{
    background-color: gray;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    border : 1px solid black;
    height: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ul>
	<li class="btn checkall">
		<input type="checkbox" name="offer[key1]" class="check_one">
		<input type="checkbox" name="offer[key2]" class="check_one">
		<input type="checkbox" name="offer[key3]" class="check_one">
		<input type="checkbox" name="offer[key4]" class="check_one">
	</li>
	<li class="btn checkall">
		<input type="checkbox" name="offer[key1]" class="check_one">
		<input type="checkbox" name="offer[key2]" class="check_one">
		<input type="checkbox" name="offer[key3]" class="check_one">
		<input type="checkbox" name="offer[key4]" class="check_one">
	</li>
	<li class="btn checkall">
		<input type="checkbox" name="offer[key1]" class="check_one">
		<input type="checkbox" name="offer[key2]" class="check_one">
		<input type="checkbox" name="offer[key3]" class="check_one">
		<input type="checkbox" name="offer[key4]" class="check_one">
	</li>
  <li class="btn checkall">
		<input type="checkbox" name="offer[key1]" class="check_one">
		<input type="checkbox" name="offer[key2]" class="check_one">
		<input type="checkbox" name="offer[key3]" class="check_one">
		<input type="checkbox" name="offer[key4]" class="check_one">
	</li>
</ul>
</body>
</html>

【讨论】：