使用JQuery解除一组复选框的绑定

Using JQuery to Unbind a Group of Checkboxes

本文关键字：一组 复选框 绑定 JQuery 使用      更新时间：2023-09-26

我现在有下面的jQuery脚本，当从select html元素的下拉列表中选择值测试时绑定一组复选框。因此，复选框就像单选按钮一样，一次只能选中一个复选框。我的问题是，我需要单选按钮回到他们的默认行为时，从选择框中选择另一个值后，测试值已被选中，我似乎无法弄清楚。任何帮助都将非常感激。请看我下面的javascript和html代码。

$('select').on('change', function() {
$('input.example').prop('checked', false); 
if(this.value == 'test')
{
alert("Hello");
$('input.example').bind('change', function() {
    $('input.example').not(this).attr('checked', false);  
});
}
else if(this.value != 'test')
{
alert("Bye");
$('input.example').unbind('change', function() {
    $('input.example').not(this).attr('checked', false);  
});    
}
});
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />

您可以命名您的更改处理程序，以便您在解除绑定时引用相同的函数。我用change代替了change。myChange’作为更改事件来区分它，以便以后可以轻松地解除绑定。否则，你实际上是在创建一个相同的函数，然后试图解绑定它，而不是创建并绑定到事件的函数。我希望这对你有帮助。

 $('select').on('change', function() {
    $('input.example').prop('checked', false); 
    if(this.value == 'test') {
      $('input.example').bind('change.myChange', function() {
        $('input.example').not(this).attr('checked', false);  
      });
    } else if(this.value != 'test') {
      $('input.example').unbind('change.myChange');    
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />

试试这个

 $(function () {
  $('select').on('change', function () {
    $('input.example').prop('checked', false);
    if (this.value == 'test')
    {
      alert('Hello');
      $('input.example').bind('change', changeHandler);
    } 
    else if (this.value != 'test')
    {
      alert('Bye');
      $('input.example').unbind('change', changeHandler);
    }
  });
  function changeHandler() {
    $('input.example').not(this).attr('checked', false);
  }
});

这里是工作小提琴https://jsfiddle.net/wyd2206c/

你会期望这样吗?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('select').on('change', function() {
		if(this.value == 'test')
		{
			$('input.example').attr('type', 'radio'); 
			$('input.example').attr('checked', false);  
		}else if(this.value != 'test')
		{
			$('input.example').attr('type', 'checkbox');  
			$('input.example').attr('checked', false);
		}
	});
});
</script>
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />

相关文章：