li标签中使用的复选框jquery

时间：2018-01-10 09:00:15

标签： javascript jquery html css checkbox

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

＆＃13;
＆＃13; 
while True:
    trend = list()
    trend.append(priceRPX())
    print trend
    sleep(1)
＆＃13; 
jQuery(function($) {

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

7 个答案:

答案 0 :(得分：2)

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

＆＃13;
＆＃13; 
$(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);
  })
})
＆＃13; 
.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

你可以这样试试。

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

    });
});
＆＃13; 
.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

你的意思是这样吗？

＆＃13;
＆＃13; 
jQuery(function($) {
 $("li").click(function(e){ 
  if (e.target !== this) return;
  $("li input").prop('checked', false);
  $(this).find("input").prop('checked', true);
 })
});
＆＃13; 
.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

＆＃13;
＆＃13; 
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);
    });
  });
});
＆＃13; 
.btn {
  background-color: gray;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border: 1px solid black;
  height: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

编辑

添加了backgroundColor：＆＃34; red＆＃34;在活跃的LI

答案 4 :(得分：0)

简短而简单:) 

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

答案 5 :(得分：0)

试试这个。你的确如此：

TRIM

Javascript：

<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>

答案 6 :(得分：0)

＆＃13;
＆＃13; 
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);
 });

});
＆＃13; 
.btn{
    background-color: gray;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    border : 1px solid black;
    height: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题