Jquery 取消选中复选框 选中的同级姐妹

Jquery uncheck checkboxes siblings on check

本文关键字：姐妹 复选框 取消 Jquery      更新时间：2023-09-26

我想同时选中一个复选框。我想检查值。

如果我删除所有div 标签，但它有效，但我需要为组织提供div 标签。

所以我的js代码：

$('.myCheckbox').click(function() {
    $(this).siblings('input:checkbox').prop('checked', false);
  var value = $(this).val();
  console.log("value = "+value);
  });

我的 html 代码在没有div 的情况下工作，但不能与div 一起使用：

<div id="id_1" class='class_1'>
  <div id="id_a" class='class_a'>
    <div>
      <img src="fr.png">
      <input type="checkbox" class="myCheckbox" value="fr" />
    </div>
    <div>
      <img src="cs.png">
      <input type="checkbox" class="myCheckbox" value="cs" />
    </div>
    <div>
      <img src="en.png">
      <input type="checkbox" class="myCheckbox" value="en" />
    </div>
  </div>
  <div id="id_b" class='class_b'>
    <div>
      <img src="bc.png">
      <input type="checkbox" class="myCheckbox" value="bc" />
    </div>
    <div>
      <img src="tl.png">
      <input type="checkbox" class="myCheckbox" value="tl" />
    </div>
    <div>
      <img src="jk.png">
      <input type="checkbox" class="myCheckbox" value="jk" />
    </div>
  </div>
</div>

$('.myCheckbox').click(function() {
   $('.myCheckbox').prop('checked', false);
   $(this).prop('checked') ? $(this).prop('checked', false) : $(this).prop('checked', true);
   var value = $(this).val();
   console.log("value = "+value);
});

您当前的情况非常适合使用无线电 相反，您需要按名称对它们进行分组： 

<div id="id_1" class='class_1'>
  <div id="id_a" class='class_a'>
    <div>
      <img src="fr.png">
      <input type="radio" name='langa' class="myRadio" value="fr" />
    </div>
    <div>
      <img src="cs.png">
      <input type="radio" name='langa' class="myRadio" value="cs" />
    </div>
    <div>
      <img src="en.png">
      <input type="radio" name='langa' class="myRadio" value="en" />
    </div>
  </div>
  <div id="id_b" class='class_b'>
    <div>
      <img src="bc.png">
      <input type="radio" name='langb' class="myRadio" value="bc" />
    </div>
    <div>
      <img src="tl.png">
      <input type="radio" name='langb' class="myRadio" value="tl" />
    </div>
    <div>
      <img src="jk.png">
      <input type="radio" name='langb' class="myRadio" value="jk" />
    </div>
  </div>
</div>

然后，您可以使用此脚本： 

$('.myRadio').change(function() {
   var value = $(this).val(); // this will get you the checked radio value.
   console.log("value = "+value);
});

定义具有相同名称的复选框，例如

<input type="checkbox" class="myCheckbox" value="bc" name="common_name" />

首先找到父兄弟姐妹，然后：

$('.myCheckbox').click(function() {
    $(this).parent().siblings().find('input:checkbox').prop('checked', false);
  });

根据定义，当您希望向用户提供选择多个选项的选项时，将使用复选框。如果您希望他只选择一个值，请使用无线电代替:)

例- 

 <input type="radio" name="gender" value="male"> Male<br>
 <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other

但是，如果必须通过复选框完成此操作，则可以尝试此:)

<input type = "checkbox" name = "sample" value = "1">firsr
<input type = "checkbox" name = "sample" value = "2">second
<input type = "checkbox" name = "sample" value = "3">third

爪哇语

$(document).ready(function() {
$('input[name=sample]').click(function(e){
$( "input[name=sample]").prop('checked', false);
$(this).attr('checked','checked')
})
});
相关文章：